Question

我有一个从.ts中的数组创建的表。单击标题时，我正在使用引导程序来对表进行排序。这适用于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。当您单击标题时，它将对前两列（Colour和Variant）进行排序，而不对第三和第四列进行排序。

为什么要这样做？而且，如何获得对所有列进行排序的信息？

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表排序不适用于所有列

1 个答案: