我正在使用Angular Material Mat-Table。我可以记录结果,但结果未显示在表中
这是我获取数组结果的代码
displayedColumns: ['monthNo', 'ratePerSqm', 'fixedAmount', 'frequnecyOfAssessment', 'typeOfAssesment', 'action']
dataSource: MatTableDataSource<GetPropertyInsuranceRate>;
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@ViewChild(MatSort, { static: true }) sort: MatSort;
ngOnInit() {
this.propertySub = this.cs.propertyId$.subscribe(data => {
this.propertyId = data;
});
this.getInsuranceRates();
}
getInsuranceRates() {
this.irs.getInsuranceRates(this.propertyId.toString())
.subscribe((data: GetPropertyInsuranceRate[]) => {
this.insuranceRateList = data;
this.dataSource = new MatTableDataSource(this.insuranceRateList);
console.log(this.insuranceRateList);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
});
this.gps.getFrequencyOfAssessment()
.subscribe((data: any) => {
this.frequencyOfAssessment = data;
});
this.gps.getTypesOfAssessment()
.subscribe((data: any) => {
this.typeOfAssessment = data;
})
}
这是html
<div class="card-body mt-3">
<table
mat-table
[dataSource]="dataSource"
matSort
style="width: 100%"
>
<ng-container matColumnDef="monthNo">
<th mat-header-cell *matHeaderCellDef mat-sort-header>
Month
</th>
<td mat-cell *matCellDef="let row">{{ row.monthNo }}</td>
</ng-container>
<ng-container matColumnDef="ratePerSqm">
<th mat-header-cell *matHeaderCellDef mat-sort-header>
Rate
</th>
<td mat-cell *matCellDef="let row">{{ row.ratePerSqm }}</td>
</ng-container>
<ng-container matColumnDef="fixedAmount">
<th mat-header-cell *matHeaderCellDef mat-sort-header>
Fixed Amount
</th>
<td mat-cell *matCellDef="let row">{{ row.fixedAmount }}</td>
</ng-container>
<ng-container matColumnDef="frequnecyOfAssessment">
<th mat-header-cell *matHeaderCellDef mat-sort-header>
Assessment Frequency
</th>
<td mat-cell *matCellDef="let row">{{ row.frequnecyOfAssessment }}</td>
</ng-container>
<ng-container matColumnDef="typeOfAssesment">
<th mat-header-cell *matHeaderCellDef mat-sort-header>
Assessment Type
</th>
<td mat-cell *matCellDef="let row">{{ row.typeOfAssesment }}</td>
</ng-container>
<ng-container matColumnDef="action">
<th mat-header-cell *matHeaderCellDef mat-sort-header>
Action
</th>
<td mat-cell *matCellDef="let row">
|
<a href="javascript:void(0);">
<i class="material-icons" matTooltip="Delete Record"
>delete</i
>
</a>
|
<a href="javascript:void(0);">
<i class="material-icons" matTooltip="View / Edit Record"
>edit</i
>
</a>
|
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>
这在控制台日志中
[{…}]
0:
buildingID: 1
effectiveDate: "2019-10-01T16:00:00"
endEffectiveDate: "2019-10-30T16:00:00"
fixedAmount: 150.5
frequencyOfAssesmentID: 7
frequnecyOfAssessment: "Quarterly"
insuranceRateID: 1
isIncludedInAssocDues: true
isVerified: true
modifiedDateTime: null
monthNo: 2
postingDateTime: null
ratePerSqm: 42
typeOfAssesment: "Fixed"
typeOfAssessmentID: 2
__proto__: Object
length: 1
__proto__: Array(0)
角度材质为8.0.1
您能告诉我我做错了什么吗?谢谢。
答案 0 :(得分:2)
displayedColumns
变量未正确分配。您使用了:
而不是=
。这是它的外观。
displayedColumns: string[] = ['monthNo', 'ratePerSqm', 'fixedAmount', 'frequnecyOfAssessment', 'typeOfAssesment', 'action'];
答案 1 :(得分:0)
尝试在您的length
中定义pageSize
和mat-paginator
(请参阅https://material.angular.io/components/paginator/overview)。