Angular DataTable服务器端处理-上传和删除后在列表上重新加载新数据

Question

我有Angular Datatables服务器端处理列表。我在更新和删除列表数据时遇到问题，列表未重新加载。

    export class RoomComponent implements OnInit {
        authToken;
        headers;  
        dtOptions: DataTables.Settings = {};


     getList() {

        const that = this;
        this.headers = new Headers({ 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + this.authToken });
        this.path = '/pending';

        this.dtOptions = {
          pagingType: 'full_numbers',
          pageLength: 25,
          serverSide: true,
          processing: true,
          ajax: (dataTablesParameters: any, callback) => {
            that.http
              .post<DataTablesResponse>(
                Apiconstants.apiBaseUrl+'/api/list', Object.assign(dataTablesParameters, {'type': this.path} )  , {headers: this.headers}
              ).map(resp => resp.json()).subscribe(resp => {
                that.List = resp.data;

                callback({
                  recordsTotal: resp.recordsTotal,
                  recordsFiltered: resp.recordsFiltered,
                  data: []
                });
              });
          },
          columns: [
            {data: "cname", name: 'UName'},
            {data: "dname", name: 'DName'}, 
            {data: "total_distance", name: 'K.M.'}, 
            {data: "total_fare", name: 'Fare'}, 
            {data: "payment_mode", name: 'Payment Mode'}]
        };

      }

      updateData(){
            // After updating row data need to reload fresh data on list.
            this.dtOptions.reloadData();
      }
}

我尝试了以下重新加载方法。

this.dtOptions.reloadData();

我遇到了错误。

  

TypeError：_this.dtOptions.reloadData不是函数

下面的HTML。

<div class="portlet-body flip-scroll">
    <table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover fontlist">
      <thead>
        <tr>
          <th>UName</th>
          <th>DName</th>
          <th>K.M.</th>
          <th>Fare</th>
          <th>Payment</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let infoD of List">

          <td>
            <div *ngIf="infoD.driver_mid==''; else elseBlock2">{{infoD.cname}}
            </div>
            <ng-template #elseBlock2>
             {{infoD.cname}}
            </ng-template>
          </td>
          <td>
            <div *ngIf="infoD.driver_mid==''; else elseBlock3"> N/A
            </div>
            <ng-template #elseBlock3>
              {{infoD.dname}}
            </ng-template>
          </td>               

          <td style="text-align: center;">

            <div *ngIf="infoD.driver_mid==''; else elseBlock6">{{infoD.total_distance}}
            </div>
            <ng-template #elseBlock6>
              {{infoD.total_distance}}
            </ng-template>
          </td>
                            <td style="text-align: center;">

            <div *ngIf="infoD.driver_mid==''; else elseBlock7">${{infoD.total_fare}}
            </div>
            <ng-template #elseBlock7>
              ${{infoD.total_fare}}
            </ng-template>
          </td>
          <td style="text-align: center;">
            <div *ngIf="infoD.driver_mid==''; else elseBlock8">{{infoD.payment_mode}}
            </div>
            <ng-template #elseBlock8>
             {{infoD.payment_mode}}
            </ng-template>
          </td>

        </tr>
        <tr *ngIf="List?.length == 0">
          <td colspan="9" class="no-data-available">No data found.</td>
        </tr>

      </tbody>
    </table>
  </div>

Answer 1

首先，您不需要重新加载列表。似乎列表更新不是角度变化检测的一部分。只需尝试对列表使用getter和setter。

以ts

get itemList(){
   return this.data;
}

set itemList(list){
   this.data = data;
}

html

<tr *ngFor="let infoD of itemList">

删除

this.dtOptions.reloadData();