保留服务器端分页上的复选框选择-Angular数据表

Question

我正在使用角度数据表。https://l-lin.github.io/angular-datatables/#/getting-started绑定一个包含复选框以选择每行的表。 我正在使用服务器端分页，并且希望保留分页中的复选框选择。

我尝试了https://l-lin.github.io/angular-datatables/#/extensions/select选项，但是它不起作用。

HTML

<table datatable [dtOptions]="dtOptions" class="row-border hover">
  <thead>
    <tr>
      <th>Select</th>
      <th>ID</th>
      <th>First name</th>
      <th>Last name</th>
    </tr>
  </thead>
  <tbody *ngIf="persons?.length != 0">
      <tr *ngFor="let person of persons">
          <td><input type="checkbox" [(ngModel)]="person.IsSelected"> </td>
          <td>{{ person.id }}</td>
          <td>{{ person.firstName }}</td>
          <td>{{ person.lastName }}</td>
      </tr>
  </tbody>
  <tbody *ngIf="persons?.length == 0">
    <tr>
      <td colspan="3" class="no-data-available">No data!</td>
    </tr>
  <tbody>
</table>

打字稿

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpResponse } from '@angular/common/http';

class Person {
  IsSelected:boolean;
  id: number;
  firstName: string;
  lastName: string;
}

class DataTablesResponse {
  data: any[];
  draw: number;
  recordsFiltered: number;
  recordsTotal: number;
}

@Component({
  selector: 'app-server-side-angular-way',
  templateUrl: 'server-side-angular-way.component.html',
  styleUrls: ['server-side-angular-way.component.css']
})
export class ServerSideAngularWayComponent implements OnInit {
  dtOptions: DataTables.Settings = {};
  persons: Person[];

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    const that = this;

    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 2,
      serverSide: true,
      processing: true,
      ajax: (dataTablesParameters: any, callback) => {
        that.http
          .post<DataTablesResponse>(
            'https://angular-datatables-demo-server.herokuapp.com/',
            dataTablesParameters, {}
          ).subscribe(resp => {
            that.persons = resp.data;

            callback({
              recordsTotal: resp.recordsTotal,
              recordsFiltered: resp.recordsFiltered,
              data: []
            });
          });
      },
      columns: [
         { data: 'id' },
         { data: 'id' }, 
         { data: 'firstName' }, 
         { data: 'lastName' }
      ],
      select: true
    };
  }
}