[英]Angular Material - mat-table not rendering data from rest api
[英]Angular Material Mat-table not rendering data
我正在使用 Angular 材料墊表。 我可以記錄結果,但它沒有呈現在我的表中
這是我獲取數組結果的代碼
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)
Angular 材質為 8.0.1
你能告訴我我做錯了什么嗎? 謝謝你。
未正確分配displayedColumns
變量。 您使用了:
而不是=
。 這是它的外觀。
displayedColumns: string[] = ['monthNo', 'ratePerSqm', 'fixedAmount', 'frequnecyOfAssessment', 'typeOfAssesment', 'action'];
嘗試在您的mat-paginator
中定義length
和pageSize
(請參閱https://material.angular.io/components/paginator/overview )。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.