Сортировка таблицы начальной загрузки не работает во всех столбцах - PullRequest
Новая
       19

Сортировка таблицы начальной загрузки не работает во всех столбцах

1 голос
/ 21 мая 2019

У меня есть таблица, созданная из массива в моем .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), но не 3-й и 4-й столбцы.

Почему он это делает? И как мне заставить его отсортировать все столбцы?

1 Ответ

1 голос
/ 21 мая 2019

ключи не совпадают для двух последних свойств, они должны быть одинаковыми 

 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>
...