如何使数据在angular-6-datatable-cc中工作

Question

我在Angular中有一个表，并且我也在使用插件angular-6-datatable-cc。我可以获取数据，但不能在分页和过滤等方面起作用。数据来自rest api。我可以看到它与mfdata array有关，但似乎无法理解需要做什么以及在哪里做？我的代码是：

Component.html

<table class="table table-striped" [mfData]="data" #mf="mfDataTable" [mfRowsOnPage]="5">
    <thead>
    <tr>
        <th style="width: 20%">
            <mfDefaultSorter by="incident.number">Incident Number</mfDefaultSorter>
        </th>
        <th style="width: 20%">
            <mfDefaultSorter by="incident.severity">Incident Severity</mfDefaultSorter>
        </th>
        <th style="width: 20%">
            <mfDefaultSorter by="incident.u_phone_number">Phone Number</mfDefaultSorter>
        </th>
        <th style="width: 20%">
            <mfDefaultSorter by="incident.urgency">Incident Urgency</mfDefaultSorter>
        </th>
        <th style="width: 20%">
            <mfDefaultSorter by="incident.subcategory">Incident Subcategory</mfDefaultSorter>
        </th>
    </tr>
    </thead>
    <tbody>
    <tr class="" *ngFor="let incident of incidents">
        <td><!--<input type="radio" name="gender">
          <i class="form-icon mr-5"></i>-->{{incident.number}}</td>
        <td style="text-overflow: ellipsis;">{{incident.severity}}</td>
        <td>{{incident.u_phone_number}}</td>
        <td>{{incident.urgency}}</td>
        <td style="text-overflow: ellipsis;">{{incident.subcategory}}</td>
      </tr>
    </tbody>
    <tfoot>
    <tr>
        <td colspan="4">
            <mfBootstrapPaginator [rowsOnPageSet]="[5,10,25]"></mfBootstrapPaginator>
        </td>
    </tr>
    </tfoot>
</table>

component.ts文件

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpEventType, HttpHeaders, HttpRequest, HttpResponse } from '@angular/common/http';
import {HttpClientModule} from '@angular/common/http';
// Services 
import { ServicenowService } from '../../services/servicenow.service';
import { Incidents } from '../../models/incidents.model';
import {AppComponent} from '../../../app.component';


@Component({
  selector: 'app-service-incident',
  templateUrl: './service-incident.component.html',
  styleUrls: ['./service-incident.component.scss']
})

export class ServiceIncidentComponent implements OnInit {

  public incidents: any; 
  public loading = true;
  public errorApi = false;


  private customer_id = 7; /// this.appComponent.customer_id;

  constructor(private service: ServicenowService,
    private appComponent: AppComponent) {

  }

  ngOnInit() {
    this.service.getIncidents(this.customer_id).subscribe((data) => {
      this.loading = true;
      this.incidents = data.result;
      this.loading = false;
      console.log('Result - ', data);
      console.log('data is received');
    })
    }
}