Угловой материал Мат-таблица не отображает данные - PullRequest
Новая
       8

Угловой материал Мат-таблица не отображает данные

1 голос
/ 03 октября 2019

Я использую угловой материал 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

Подскажите, пожалуйста, что я делаю не так? Спасибо.

Ответы [ 2 ]

2 голосов
/ 03 октября 2019

Переменная displayedColumns назначена неправильно. Вы использовали : вместо =. Вот как это должно выглядеть. 

displayedColumns: string[] = ['monthNo', 'ratePerSqm', 'fixedAmount', 'frequnecyOfAssessment', 'typeOfAssesment', 'action'];
0 голосов
/ 03 октября 2019

Попробуйте также определить length и pageSize в вашем mat-paginator (см. https://material.angular.io/components/paginator/overview).

...