时间戳

首页 > 解决方案 > 引导表排序不适用于所有列

html - 引导表排序不适用于所有列

问题描述

我有一个从 .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) 进行排序，但不会对第三和第四列进行排序。

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

标签： htmlangularmdbootstrap

解决方案

最后 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>

推荐阅读