Angular 7 DataTable: нет данных после нажатия на заголовок таблицы

Question

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

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

мой код следующий:

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- как решить проблему упорядочения столбцов на угловых * ngДля привязки Вопрос 2- Есть ли способ реализовать пользовательский текст для упорядочения строк.я попробовал подход datatable JQuery, добавив атрибуты данных (поиск и порядок)

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

Answer 1

Исправлено, удалив

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

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

// this.dtTrigger.next();

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