Angular Material Mat-table 不呈现数据答案

【问题标题】：Angular Material Mat-table not rendering dataAngular Material Mat-table 不呈现数据
【发布时间】：2020-02-01 09:32:40
【问题描述】：

我正在使用 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)

Angular 材质为 8.0.1

你能告诉我我做错了什么吗？谢谢。

【问题讨论】：

你能提供一个 stackblitz 演示吗？

标签： angular angular-material

【解决方案1】：

displayedColumns 变量未正确分配。您使用了: 而不是=。这是它的外观。

displayedColumns: string[] = ['monthNo', 'ratePerSqm', 'fixedAmount', 'frequnecyOfAssessment', 'typeOfAssesment', 'action'];

【讨论】：

【解决方案2】：

尝试在您的mat-paginator 中也定义length 和pageSize（请参阅https://material.angular.io/components/paginator/overview）。

【讨论】：