Question

更新：更改了代码以立即调用并分配dataSource，但我仍然遇到相同的结果，但sourceData.paginator正在运行。 sourceData.filter和sourceData.sort仍无效。

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

我是Angular 5和Angular Material的新手。我正在努力实施mat-table dataSource paginator以及sort和filterValue。

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

TypeError：无法设置未定义的属性'paginator'

我的过滤器无效。当我输入我的过滤字段时，在第二个字符后，我的列表返回空。

为尝试将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

由于数据是异步的，因此在实例化dataSource之前尝试添加分页器。

所以按顺序，你必须：

1 /实例化数据源 2 /查看init之后“绑定”matSort和matPaginator 3 /当数据资产可用时，将它们添加为源数据

这是一个stackblitz模拟带有Observable.of（）的异步getAssetList。延迟（XXX）

主要话题是：

  // 1/ create your instance of matTable
  dataSource = new MatTableDataSource<Element>(); 
  .......
  // 2/ call the xhr for getting asynchronous data and add it to matTable when available
  .......
  constructor (.....) {
    assetDataService.getAssetList().subscribe(results => {
        if (!results) { return };
        this.dataSource.data = results;
    });
  }
  .......
  // bind sorting, pagination and filtering
  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

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

数据模型示例后编辑：

您的问题是您无法使用嵌套数据结构进行默认排序/过滤。要显示的结构应该是扁平的，MatColumnDef应该与属性名称匹配，以使过滤和排序工作开箱即用。

因此，在将数据用于DataTable

之前，必须将数据展平

....
displayedColumns = ['fleetNumber', 'make'];
....
// on data resolve 
this.dataSource.data = data.map(item => ({
  fleetNumber: item.Data.FleetNumber,
  make: item.Data.Make
}));

然后更改模板中的显示（新数据结构+ lowerCamelCase matColumnDefs）：

    <ng-container matColumnDef="fleetNumber">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Fleet Number </mat-header-cell>
      <mat-cell *matCellDef="let asset"> {{asset.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.make}} </mat-cell>
    </ng-container>

以下是修改后的stackblitz

Answer 2

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

在我发表评论后，我搜索了一下，发现Angular的ViewChild存在问题。 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('');
    }
  }

并添加以下代码：

{{1}}

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

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

Answer 3

我也遇到了这个问题，即使确定我使用的是[hidden]而不是*ngIf，唯一似乎对我有用的事情就是使用以下代码行并进行设置一切加载后的数据源：

dataSource = new MatTableDataSource<T>(this.searchResults);
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
@ViewChild(MatTable) table: MatTable<T>;
ngAfterViewInit() {
  this.dataSource.paginator = this.paginator;
  this.dataSource.sort = this.sort;

  this.table.dataSource = this.dataSource;
}

请注意，T表示表中使用的数据的类型，因此MatTableDataSource和MatTable应该具有相同的类型。我希望这对其他人有帮助。

Angular mat-table dataSource.paginator和dataSource.sort以及dataSource.filter无法按预期工作

3 个答案: