Пытаюсь отсортировать angular -datatable, но при нажатии кнопки сортировки ничего не происходит - PullRequest
Новая
       11

Пытаюсь отсортировать angular -datatable, но при нажатии кнопки сортировки ничего не происходит

1 голос
/ 06 мая 2020

Пытаюсь отсортировать эту таблицу, но при нажатии кнопки сортировки ничего не происходит.

Если я перемещаю * ngFor в тег tr, данные исчезают, когда я нажимаю кнопку «Сортировать».

Вот таблица I. Я использую: https://l-lin.github.io/angular-datatables/# / basic / zero-config 

<div class="container">
      <div class="row">
        <div class="col-lg-5">
          <h4>Driver's List</h4>
          <table datatable id="driverTable" class="table table-striped">
            <thead class="thead-dark">
              <tr>
                <th scope="col">Name</th>
                <th scope="col">Distance</th>
                <th scope="col">Time</th>
                <th scope="col">View Info</th>
              </tr>
            </thead>
            <tbody *ngFor="let driver of googleDrivers">
              <tr>
                <td>{{driver.Name}}</td>
                <td>{{driver.Distance}}</td>
                <td>{{driver.Duration}}</td>
                <td>Some button</td>
              </tr>
            </tbody>

          </table>
        </div>
        <div class="col-lg-6">
          <h4>Directions:</h4>
          <div #map id="gmap" class="img-responsive"></div>
        </div>
      </div>
    </div>

1 Ответ

1 голос
/ 07 мая 2020

Рассматривая вашу проблему, я предполагаю, что ваш список googleDrivers извлекается асинхронно (если нет, предоставьте дополнительную информацию о коде). В этом случае вы должны использовать dtTrigger, который просто уведомляет таблицу о необходимости визуализации после получения данных. Вы можете сделать это, просто позвонив по номеру next(). См. документы

Кроме того, вы должны использовать *ngFor в теге <tr> .

Пример шаблона: 

<table datatable id="driverTable" class="table table-striped" [dtTrigger]="dtTrigger">
  <thead class="thead-dark">
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Distance</th>
    <th scope="col">Time</th>
    <th scope="col">View Info</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let driver of googleDrivers">
    <td>{{driver.Name}}</td>
    <td>{{driver.Distance}}</td>
    <td>{{driver.Duration}}</td>
    <td>Some button</td>
  </tr>
  </tbody>
</table>

Пример минимальной асинхронной c загрузки данных в коде вашего компонента: 

export class AppComponent implements OnInit {

  public googleDrivers: any[] = [];
  public dtTrigger: Subject<void> = new Subject();

  public ngOnInit(): void {
    this.fetchData().then(data => {
      this.googleDrivers = data;
      this.dtTrigger.next(); // call trigger next() after data loaded
    });
  }
}
...