Bootstrap表排序不适用于所有列

Question

我有一个由.ts中的数组创建的表。当您单击标头时，我正在使用Bootstrap来对表进行排序。这适用于2列，但不适合其他2。数组中的所有数据都是字符串，并且看起来与彼此相同。

html ：

<table id="tableContents" mdbTable class="z-depth-1">
<thead>
  <tr>
    <th *ngFor="let head of headElements; let i = index" aria-controls="tableContents" scope="col" [mdbTableSort]="filterData" [sortBy]="headElements[i]">{{head}} <mdb-icon fas icon="sort"></mdb-icon></th> 
  </tr>
</thead>
<tbody>
  <tr *ngFor="let fact of filterData; let i = index"> 
    <td>{{ fact.Colour | titlecase }}</td>
    <td>{{ fact.Variant }}</td>
    <td>{{ fact.LastProcess }}</td>
    <td>{{ fact.LastProcessStatus }}</td>
  </tr>
</tbody>

.ts ：

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  headElements = ['Colour', 'Variant', 'Process', 'Status'];
  filerData: any = [];
  filterData = [{
          Colour: "Red",
          Variant: "Left",
          LastProcess: "Run",
          LastProcessStatus: "Pass"
        },
        {
          Colour: "Black",
          Variant: "Right",
          LastProcess: "Walk",
          LastProcessStatus: "Fail"
        }
        ]
}

这是问题的示例。当您单击标头时，将对前两列(Colour＆amp; Variant(进行分类，但不是第三列＆amp;第四列。

为什么这样做？而且，我如何将其分类所有列？

Answer 1

最近两个属性的密钥不相同，必须是相同的

 headElements = ['Colour', 'Variant', 'Process', 'Status'];
 filerData: any = [];
 filterData = [{
      Colour: "Red",
      Variant: "Left",
      LastProcess: "Run", // **has to be Process**
      LastProcessStatus: "Pass" // **ha to be Status**
    },
    {
      Colour: "Black",
      Variant: "Right",
      LastProcess: "Walk",
      LastProcessStatus: "Fail"
    }
    ]

所以你的数组必须像这样

filterData = [{
      Colour: "Red",
      Variant: "Left",
      Process: "Run",
      Status: "Pass" 
    },
    {
      Colour: "Black",
      Variant: "Right",
      Process: "Walk",
      Status: "Fail"
    }
]

并将其更改为Ngfor循环

<tr *ngFor="let fact of filterData; let i = index"> 
    <td>{{ fact.Colour | titlecase }}</td>
    <td>{{ fact.Variant }}</td>
    <td>{{ fact.Process }}</td>
    <td>{{ fact.Status }}</td>
</tr>