Обработка на стороне сервера 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();

Я получаю ниже ошибка.

Ошибка типа: _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 для списка.

в тс

get itemList(){
   return this.data;
}

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

html

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

Удалить

this.dtOptions.reloadData();