Angular mat-table dataSource.paginator 和 dataSource.sort 和 dataSource.filter 没有按预期工作

Question

更新：将代码更改为立即调用并分配dataSource，但我仍然遇到相同的结果，除了sourceData.paginator正在工作。在sourceData.filter和sourceData.sort仍然没有工作。

请注意：我没有收到任何错误，因为错误与现在正在工作的分页器有关。此外，它可能与我的数据格式有关，因此包含一些数据作为示例。请注意，我response.data用于将数据分配给源，然后{{asset.Data.FleetNumber}}用于显示字段。

我对 Angular 5 和 Angular Material 很陌生。我正在努力实施mat-table dataSource paginatorandsort和filterValue。

我收到以下错误：（已解决 ）

类型错误：无法设置未定义的属性“分页器”

而且我的过滤器不起作用。当我在过滤器字段中键入第二个字符后，我的列表返回空。

我尝试了不同的生命周期钩子，试图将sort和正确分配paginator给 my dataSource，但它似乎不起作用：ngDoCheck(), ngAfterViewInit(), ngAfterViewChecked(), ngAfterContentInit()。显然，其中一些会导致无限循环。

我已经在我的组件中实现了我的dataSourceandpaginator和sortandfilterValue如下：

...
dataSource = new MatTableDataSource<Asset>();
displayedColumns = ['fleetNumber', 'make'];

constructor(private assetDataService: AssetDataService, private router: Router,
    public dialog: MatDialog, public snackBar: MatSnackBar, private route: ActivatedRoute,
    private toastr: ToastrService) {
    assetDataService.getAssetList().subscribe(results => {
      if (!results) { return };
      this.dataSource.data = results;
    });
}
ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
}

applyFilter(filterValue: string) {
    filterValue = filterValue.trim();
    filterValue = filterValue.toLowerCase();
    this.dataSource.filter = filterValue;
}
...

我的看法：

<div class="asset-container">
  <div class="asset-header">
    <mat-form-field>
      <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
    </mat-form-field>
  </div>

  <mat-table #table [dataSource]="dataSource" matSort>

    <!-- Id Column -->
    <ng-container matColumnDef="fleetNumber">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Fleet Number </mat-header-cell>
      <mat-cell *matCellDef="let asset"> {{asset.Data.FleetNumber}} </mat-cell>
    </ng-container>

    <!-- Make Column -->
    <ng-container matColumnDef="make">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Make </mat-header-cell>
      <mat-cell *matCellDef="let asset"> {{asset.Data.Make}} </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>

  <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>

数据样本（返回的对象数组中的一个对象。我response.data用于将数据分配给源，然后{{asset.Data.FleetNumber}}用于显示字段：

[   {
      "Id":"5ee436a4-55ce-47b5-8489-82b190e7d489",
      "AssetType":"c00a71f5-d7f6-403b-b13f-37cf35961456",
      "AssetDetailId":"716ade20-871b-495b-9bb7-081d7cf1e57d",
      "Name":"Vehicle",
      "Description":"Vehicle Description",
      "TotalQuantity":1,
      "AssetDetail":{  
         "Id":"716ade20-871b-495b-9bb7-081d7cf1e57d",
         "Data":null,
         "Created":"2018-02-26T06:05:03.0695992Z",
         "CreatedById":null
      },
      "IncludeData":false,
      "Data":{  
         "Id":null,
         "FleetNumber":"FL002",
         "VehicleRegistrationNumber":"HFJ001GP",
         "LicenceNumber":"L1233465456",
         "VIN":"V5544257",
         "EngineNumber":"E4544564",
         "Make":"Porche",
         "Model":"911 Turbo",
         "Driven":true,
         "GVM":"2750kg",
         "TARE":"3250kg",
         "VehicleClass":"Class 1",
         "TitleHolder":"Mr T",
         "Owner":"T",
         "DateOfFirstRegister":"2018-01-31T22:00:00Z",
         "LicenceExpireDate":"2018-02-21T22:00:00Z",
         "IsComplete":true,
         "IsActive":true,
         "InsuranceCompany":"INS001",
         "PolicyNumber":"POL001",
         "InsuredValue":"R2500000.00",
         "FinanceHouse":"None",
         "FinanceContactNumber":"None",
         "FinanceStartDate":"2018-01-31T22:00:00Z",
         "FinanceEndDate":"2018-02-21T22:00:00Z",
         "MaintenanceSupplier":"None",
         "MaintenanceContactNumber":"123456",
         "MaintenanceStartDate":"2018-01-31T22:00:00Z",
         "MaintenanceEndDate":"2018-02-27T22:00:00Z",
         "Permits":[  
            {  
               "Permits":"Harbour Permit",
               "PermitTitle":"HB001",
               "PermitIssueDate":"2018-01-31T22:00:00Z",
               "PermitEndDate":"2018-02-16T22:00:00Z"
            },
            {  
               "AssetID":null,
               "Permits":"Cross-Border Permit",
               "PermitTitle":"C001",
               "PermitIssueDate":"2018-02-08T22:00:00Z",
               "PermitEndDate":"2018-02-22T22:00:00Z"
            }
         ],
         "VehicleTypeSpecificRegistration":"",
         "VehicleTypeSpecificRegistrationIssueDate":"",
         "VehicleTypeSpecificRegistrationEndDate":"",
         "PermitName":null,
         "PermitTitle":null
      },
      "Type":0,
      "Created":"2018-02-22T08:39:58.84",
      "CreatedById":""
    },
]

任何帮助将非常感激！

Answer 1

感谢 Pierre Mallet 在详细答案中投入的时间，为我节省了大量时间。但是正如您在评论中看到的那样，我在运行this.dataSource.sort和this.dataSource.paginator运行时遇到了问题。

在我发表评论后，我搜索了一下，发现ViewChild来自 Angular 的有问题。该ViewChild不会捕捉到任何*ngIf在ngAfterViewInit()。因此，要使两者都运行，您需要执行以下操作：

从以下内容中删除 ngAfterViewInit()

@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

并添加以下代码：

private paginator: MatPaginator;
  private sort: MatSort;

  @ViewChild(MatSort) set matSort(ms: MatSort) {
    this.sort = ms;
    this.setDataSourceAttributes();
  }

  @ViewChild(MatPaginator) set matPaginator(mp: MatPaginator) {
    this.paginator = mp;
    this.setDataSourceAttributes();
  }

  setDataSourceAttributes() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;

    if (this.paginator && this.sort) {
      this.applyFilter('');
    }
  }

在那之后，一切都应该像魅力一样工作。我的答案来源是这个 -> https://github.com/angular/material2/issues/10205

非常感谢所有帮助解决这个问题的人！