Question

根据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 是一种实现自定义文本以对行进行排序的方法。我通过添加数据属性（搜索和顺序）尝试了jQuery的datatable方法

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

Answer 1

通过删除

修复了该问题

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

并取消注释

// this.dtTrigger.next();

订阅http请求后

Angular 7 DataTable：单击表头后无可用数据

1 个答案: