我有一个从 .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"
}
]
}
这是问题的一个例子。当您单击标题时,它会对前两列 ( Colour
& Variant
) 进行排序,但不会对第三和第四列进行排序。
为什么要这样做?而且,我如何让它对所有列进行排序?