Блог

Я работаю над получением списка валют в таблице данных после ее настройки в соответствии с https://l-lin.github.io/angular-datatables/#/basic/angular-way (угловой способ).

После реализации, щелкнув ячейку заголовка таблицы, datatable очищает данные, зная, что они упорядочивают данные правильно, если строки жестко закодированы.

ниже приведен мой код:

HTML:

 <table
  datatable
  [dtOptions]="dtOptions"
  [dtTrigger]="dtTrigger"
  class="table-basic table">
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let currency of currencies">
      <td>{{ currency.Code}}</td>
      <td>{{ currency.Name}}</td>
      <td>{{ currency.NativeName }}</td>
    </tr>
  </tbody>
</table>
  

Компонент

 export class CoverageComponent implements AfterViewInit, OnDestroy, OnInit         {

  @ViewChild(DataTableDirective)
  dtElement: DataTableDirective;

  dtTrigger: Subject<any> = new Subject();
  dtOptions: DataTables.Settings = {};

  currencies: Currency[] = [];

  ngOnInit(): void {
    this.dtOptions = {
        dom : ''
    };

          this.currencyService.getCurrencies().subscribe(
            (data: Currency[]) => {
              this.currency = data.slice(0, 5);

              // this.dtTrigger.next();
                  },
            (err : any) => {
              console.log("---> error", err);
            }
          );
        }

  ngAfterViewInit(): void {
      this.dtTrigger.next();
    }

    ngOnDestroy(): void {
      // Do not forget to unsubscribe the event
      this.dtTrigger.unsubscribe();
    }

    rerender(): void {
        this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
        // Destroy the table first
        dtInstance.destroy();
        // Call the dtTrigger to rerender again
        this.dtTrigger.next();
      });
  }
  

Вопрос 1- как исправить проблему упорядочения столбцов в подходе привязки angular * ngFor
Вопрос 2 — есть ли способ реализовать пользовательский текст для упорядочения строк. я попробовал подход jquery с данными, добавив атрибуты данных (поиск и порядок)

  attr.data-search="{{currency.fullname}}"
 attr.data-order="{{currency.fullname}}"
  

Исправлено путем удаления

 ngAfterViewInit(): void {
  this.dtTrigger.next();
}
  

и раскомментирование

 // this.dtTrigger.next();
  

после подписки на http-запрос