更新:更改了代码以立即调用并分配dataSource
,但我仍然遇到相同的结果,除了sourceData.paginator
工作中。这sourceData.filter
and sourceData.sort
仍然不起作用。
请注意:我没有收到任何错误,因为该错误与现在正在工作的分页器有关。另外,这可能与我的数据格式有关,因此包含一些数据作为示例。作为注释,我使用response.data
将我的数据分配给源,然后使用{{asset.Data.FleetNumber}}
用于显示字段。
我对 Angular 5 和 Angular Material 还很陌生。我正在努力实施mat-table
dataSource
paginator
and sort
and filterValue
.
我收到以下错误: (解决)
类型错误:无法设置未定义的属性“分页器”
而且我的过滤器不起作用。当我在过滤器字段中输入时,在第二个字符之后,我的列表返回空。
我尝试了不同的生命周期挂钩,试图正确分配sort
and paginator
to my dataSource
,但它似乎不起作用:ngDoCheck()
, ngAfterViewInit()
, ngAfterViewChecked()
, ngAfterContentInit()
。显然,其中一些会导致无限循环。
我已经实施了我的dataSource
and paginator
and sort
and 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;
}
...
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>
数据示例(返回的对象数组中的一个对象。我使用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":""
},
]
任何帮助将非常感激!