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 paginator 和 sort 和 filterValue。

我收到以下错误: (已解决)

TypeError: Cannot set property 'paginator' of undefined

而且我的过滤器不工作。当我在筛选字段中输入第二个字符后，我的列表返回空。

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

我已经在我的组件中实现了我的 dataSource 和 paginator 以及 sort 和 filterValue 如下:

...
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 时遇到了问题。

在我发表评论后，我搜索了一下，发现 Angular 的 ViewChild 有问题。 ViewChild 不会在 ngAfterViewInit() 中使用 *ngIf 捕获任何内容。因此，要让两者都运行，您需要执行以下操作:

从 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

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