Bootstrap table 排序不适用于所有列

Question

我有一个 table 是从我的 .ts 中的数组创建的。当您单击 headers 时，我正在使用 bootstrap 对 table 进行排序。这适用于 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"
        }
        ]

}

这是一个example的问题。当您单击 headers 时，它会对前两列（Colour 和 Variant）进行排序，但不会对第 3 列和第 4 列进行排序。

为什么要这样做？而且，如何让它对所有列进行排序？

Answer 1

最后 2 个属性的键不相同，必须相同

 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>

Bootstrap table 排序不适用于所有列

Bootstrap table sort not working on all columns

html

angular

mdbootstrap