Angular mat-table dataSource.paginator 和 dataSource.sort 和 dataSource.filter 没有按预期工作 [英] Angular mat-table dataSource.paginator and dataSource.sort and dataSource.filter not working as expected

查看：26
本文介绍了Angular mat-table dataSource.paginator 和 dataSource.sort 和 dataSource.filter 没有按预期工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

更新:将代码更改为立即调用并分配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();displayColumns = ['fleetNumber', 'make'];构造函数(私有资产数据服务:资产数据服务，私有路由器:路由器，公共对话:MatDialog，公共小吃店:MatSnackBar，私人路线:ActivatedRoute，私人 toastr: ToastrService) {assetDataService.getAssetList().subscribe(results => {如果(！结果){返回}；this.dataSource.data = 结果；});}ngAfterViewInit() {this.dataSource.paginator = this.paginator;this.dataSource.sort = this.sort;}应用过滤器(过滤器值:字符串){filterValue = filterValue.trim();filterValue = filterValue.toLowerCase();this.dataSource.filter = filterValue;}...

我的观点:

<div class="asset-header"><mat-form-field><input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter"></mat-form-field>
<mat-table #table [dataSource]="dataSource" matSort><!-- Id 列--><ng-container matColumnDef="fleetNumber"><mat-h​​eader-cell *matHeaderCellDef mat-sort-header>机队编号</mat-h​​eader-cell><mat-cell *matCellDef="let asset">{{asset.Data.FleetNumber}} </mat-cell></ng-容器><!-- 制作列--><ng-container matColumnDef="make"><mat-h​​eader-cell *matHeaderCellDef mat-sort-header>制作 </mat-h​​eader-cell><mat-cell *matCellDef="let asset">{{asset.Data.Make}} </mat-cell></ng-容器><mat-h​​eader-row *matHeaderRowDef="displayedColumns"></mat-h​​eader-row><mat-row *matRowDef="let row; columns:displayedColumns;"></mat-row></mat-table><mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>

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

<代码>[ {"Id":"5ee436a4-55ce-47b5-8489-82b190e7d489","资产类型":"c00a71f5-d7f6-403b-b13f-37cf35961456","AssetDetailId":"716ade20-871b-495b-9bb7-081d7cf1e57d","名称":"车辆","描述":"车辆描述",总数量":1，资产详细信息":{"Id":"716ade20-871b-495b-9bb7-081d7cf1e57d",数据":空，"创建":"2018-02-26T06:05:03.0695992Z","CreatedById":null},包含数据":假，数据":{身份证":空，"FleetNumber":"FL002","VehicleRegistrationNumber":"HFJ001GP","LicenceNumber":"L1233465456","VIN":"V5544257","EngineNumber":"E4544564","Make":"门廊","型号":"911 Turbo",驱动":真，"GVM":"2750kg","TARE":"3250kg","VehicleClass":"Class 1","TitleHolder":"T 先生","所有者":"T","DateOfFirstRegister":"2018-01-31T22:00:00Z","LicenceExpireDate":"2018-02-21T22:00:00Z","IsComplete":true,IsActive":真，"保险公司":"INS001","PolicyNumber":"POL001","保险价值":"R2500000.00","FinanceHouse":"无","FinanceContactNumber":"无","FinanceStartDate":"2018-01-31T22:00:00Z","FinanceEndDate":"2018-02-21T22:00:00Z","MaintenanceSupplier":"无","MaintenanceContactNumber":"123456","MaintenanceStartDate":"2018-01-31T22:00:00Z","MaintenanceEndDate":"2018-02-27T22:00:00Z",许可":[{"许可证":"海港许可证","PermitTitle":"HB001","PermitIssueDate":"2018-01-31T22:00:00Z","PermitEndDate":"2018-02-16T22:00:00Z"},{资产ID":空，"许可证":"跨境许可证","PermitTitle":"C001","PermitIssueDate":"2018-02-08T22:00:00Z","PermitEndDate":"2018-02-22T22:00:00Z"}],"VehicleTypeSpecificRegistration":"","VehicleTypeSpecificRegistrationIssueDate":"","VehicleTypeSpecificRegistrationEndDate":"",许可证名称":空，"PermitTitle":null},"类型":0,"创建":"2018-02-22T08:39:58.84","CreatedById":""},]

任何帮助将不胜感激！

解决方案

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

发表评论后，我搜索了一下，发现 Angular 的 ViewChild 有问题.ViewChild 在 ngAfterViewInit() 中没有用 *ngIf 捕获任何东西.因此，要同时运行，您需要执行以下操作:

从 ngAfterViewInit()

中删除以下内容

@ViewChild(MatPaginator) 分页器:MatPaginator;@ViewChild(MatSort) 排序:MatSort；ngAfterViewInit() {this.dataSource.paginator = this.paginator;this.dataSource.sort = this.sort;}

并添加以下代码:

私有分页器:MatPaginator；私有排序:MatSort；@ViewChild(MatSort) 设置 matSort(ms: MatSort) {this.sort = ms;this.setDataSourceAttributes();}@ViewChild(MatPaginator) 设置 matPaginator(mp: MatPaginator) {this.paginator = mp;this.setDataSourceAttributes();}setDataSourceAttributes() {this.dataSource.paginator = this.paginator;this.dataSource.sort = this.sort;如果(this.paginator && this.sort){this.applyFilter('');}}

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

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

UPDATED: Changed the code to immediately call and assign the dataSource, but I still experience the same results, with the exception that the sourceData.paginator is working. The sourceData.filter and sourceData.sort is still not working.

PLEASE NOTE: I am getting no errors, as the error had to do with the paginator that is now working. Also, it might have to do with the format of my data, so included some data as an example. As a note, I use response.data for assigning my data to the source, and then use {{asset.Data.FleetNumber}} for displaying a field.

I am quite new to Angular 5 and Angular Material. I am struggling with implementing the mat-table dataSource paginator and sort and filterValue.

I get the following Error: (RESOLVED)

TypeError: Cannot set property 'paginator' of undefined

And my filter is not working. When I type in my filter field, after the 2nd character, my list returns empty.

I have tried different life-cycle hooks in an attempt to correctly assigning the sort and paginator to my dataSource, but it does not seem to work: ngDoCheck(), ngAfterViewInit(), ngAfterViewChecked(), ngAfterContentInit(). Obviously some of these cause an infinite loop.

I have implemented my dataSource and paginator and sort and filterValue as follows in my component:

...
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;
}
...

My view:

<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>

Sample of data (one object in my array of objects returned. I use response.data for assigning my data to the source, and then use {{asset.Data.FleetNumber}} for displaying a field:

[   {
      "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":""
    },
]

Any help would be much appreciated!

解决方案

Thanks to Pierre Mallet for the invested time in that detailed answer, that saved me tons of time. But as you can see inside the comments, i had problems to get the this.dataSource.sort and this.dataSource.paginator running.

After i posted my comment, i searched a bit and found out, that there is a problem with the ViewChild from Angular. The ViewChild doesn't catch anything with *ngIf in ngAfterViewInit(). So to get both running, you need to do the following:

Remove the following from ngAfterViewInit()

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

and add the following piece of code:

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('');
    }
  }

after that, everything should work like a charme. Source of my answer is this -> https://github.com/angular/material2/issues/10205

many thanks to everyone who helped solving this issue!

这篇关于Angular mat-table dataSource.paginator 和 dataSource.sort 和 dataSource.filter 没有按预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆