角垫表dataSource.paginator和dataSource.sort和dataSource.filter无法按预期工作 [英] Angular mat-table dataSource.paginator and dataSource.sort and dataSource.filter not working as expected
问题描述
更新:更改了代码以立即调用并分配dataSource，但是我仍然遇到相同的结果，除了sourceData.paginator在工作. sourceData.filter和sourceData.sort仍然不起作用.
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.
请注意:我没有收到任何错误，因为该错误与现在可以正常使用的分页器有关.另外，它可能与我的数据格式有关，因此以一些数据为例.注意，我使用response.data将数据分配给源，然后使用{{asset.Data.FleetNumber}}显示字段.
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.
我对Angular 5和Angular Material还是很陌生.我正在努力实现mat-table dataSource paginator和sort和filterValue.
I am quite new to Angular 5 and Angular Material. I am struggling with implementing the mat-table dataSource paginator and sort and filterValue.
我收到以下错误消息: (已解决)
TypeError:无法设置未定义的属性"paginator"
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.
我尝试了不同的生命周期挂钩，以尝试将sort和paginator正确分配给我的dataSource，但是它似乎不起作用:ngDoCheck()，ngAfterViewInit()，ngAfterViewChecked() ，ngAfterContentInit().显然，其中一些会导致无限循环.
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.
我已经在我的组件中实现了dataSource和paginator和sort和filterValue，如下所示:
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;
}
...
我的观点:
<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}}来显示字段:
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":""
},
]
任何帮助将不胜感激！
推荐答案
感谢Pierre Mallet在这个详细答案中所花费的时间，为我节省了很多时间.但是正如您在注释中看到的那样，我在运行this.dataSource.sort和this.dataSource.paginator时遇到了问题.
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.
发表评论后，我进行了搜索，发现Angular的ViewChild存在问题. ViewChild在ngAfterViewInit()中没有捕获任何*ngIf的内容.因此，要使两者同时运行，您需要执行以下操作:
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:
从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
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!
这篇关于角垫表dataSource.paginator和dataSource.sort和dataSource.filter无法按预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
