javascript - 如何在点击功能上将数据设置到数据表中？

Question

当我们从 API 动态获取数据时，数据表搜索不起作用，当我们在数据表输入搜索中输入任何字符串时，它会清除表，从搜索文本表中删除字符串后不显示任何数据，但是当我们尝试不获取数据时从API然后它可以正常工作。

这是我的 html 文件代码

 <tbody>
      <tr *ngFor="let data of TableData;let i = index;">
        <td>{{data.TXN_ID}}</td>
        <td>{{data.CREATE_DATE}}</td>
        <td>{{data.OID}}</td>
        <td>{{data.OID}}</td>
        <td>{{data.businessName}}</td>
        <td>{{data.CUST_EMAIL}}</td>
        <td>{{data.PAYMENT_TYPE}}</td>
        <td>{{data.CURRENCY_CODE}}</td>
        <td>{{data.AMOUNT}}</td>
        <td>{{data.INTERNAL_CURRENCY_CHANGE_RATE}}</td>
        <td>{{data.TXN_ID}}</td>
      </tr>
    </tbody>

这是我的 ts 文件代码

    ngAfterViewInit(){

        this.dataTable = $(this.dataTable.nativeElement);
        this.dtOptions = {
          dom: "<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-12 hidden-xs text-right'" +
          "B" +
          ">r>" +
          "t" +
          "<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs' l><'col-xs-12 col-sm-6'p>>",
          orderCellsTop: true,
          fixedHeader: {
            header: true,
            footer: true
          },
          deferRender:true,
          autoWidth: true,
          retrieve: false,
          responsive: false,
          scrollX:false,
          buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print',
            {
              extend: 'collection',
              text: 'Select Columns',
              buttons: [ {
                extend: 'columnsToggle',
                columns: ':not([data-visible="false"])'
              } ],
              className: 'btn btn-primary btn-sm m-5 width-140 assets-select-btn toolbox-delete-selected'
            },
          ],
        };
        let _dataTable = this.dataTable.DataTable(this.dtOptions);

        // $('#dataTable thead tr').clone(true).appendTo('#dataTable thead');

        $('#dataTable thead tr:eq(1) th').each( function (i) {
          var title = $(this).text();
          $(this).html( '<input type="text" placeholder="Search '+title+'" />' );

          $('input', this).on( 'keyup change', function () {
            if ( _dataTable.column(i).search() !== this.value ) {
              _dataTable
              .column(i)
              .search( this.value )
              .draw();
            }
          } );
        } );



     this.getDataFromService.getReport(body).subscribe(data => {
      this.TableData = data['statusDesc'];
    });
}

标签： javascriptangular