Mat-table呈现行，但不呈现数据

Question

我在我的项目中使用Angular 5和材料垫表。

在我的组件文件中，我使用observable从服务中检索数据并将其绑定到组件上的变量。Mat-table显示行，但不打印数据。我尝试了ngFor，它似乎可以工作。控制台中没有错误。有什么想法为什么表格不显示在数据中？

TS：

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';

import { NotificationService } from './../../core/services/notification.service';
import { OperationConfiguration } from './../../core/models/operationConfiguration';
import { ProgressBarService } from '../../core/services/progress-bar.service';
import { OperationConfigurationService } from '../../core/services/operation-configuration.service';

@Component({
  selector: 'app-operation-configuration-list',
  templateUrl: './operation-configuration-list.component.html',
  styleUrls: ['./operation-configuration-list.component.css']
})
export class OperationConfigurationListComponent implements OnInit {

  operationConfigurations: OperationConfiguration[];
  columnsToDisplay: ['id', 'columnName', 'hidden'];

  constructor(private progressBarService: ProgressBarService,
    private notificationService: NotificationService,
    private configurationService: OperationConfigurationService) {
    this.progressBarService.show();
  }

  ngOnInit() {
    this.loadOperationConfigurations();
  }

  private loadOperationConfigurations(): void {

    this.configurationService.getAll(null)
      .subscribe(
        results => {
          this.operationConfigurations = results;
          this.progressBarService.hide();
        },
        error => {
          if (error.statusText === 'Unknown Error') {
            this.notificationService.openSnackBar('An error occurred, please try again later.');
          } else {
            this.notificationService.openSnackBar(error.error);
          }
          this.progressBarService.hide();
        }
      );
  }

}

HTML：

<!-- THIS WORKS -->
<ul>
  <li *ngFor="let c of operationConfigurations">
    {{ c.id }}
  </li>
</ul>

<!-- THIS DOES NOT WORK -->
<mat-table [dataSource]="operationConfigurations">

  <mat-header-row *matHeaderRowDef="columnsToDisplay"></mat-header-row>
  <mat-row *matRowDef="let rowData; columns: columnsToDisplay"></mat-row>

  <ng-container matColumnDef="id">
    <mat-header-cell *matHeaderCellDef> # </mat-header-cell>
    <mat-cell *matCellDef="let column">
      {{column.id}}
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="columnName">
    <mat-header-cell *matHeaderCellDef> Column </mat-header-cell>
    <mat-cell *matCellDef="let column">
      {{column.columnName}}
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="hidden">
    <mat-header-cell *matHeaderCellDef> Visibility </mat-header-cell>
    <mat-cell *matCellDef="let column">
      {{column.hidden}}
    </mat-cell>
  </ng-container>

</mat-table>

结果：

Answer 1

罪魁祸首似乎是我宣告的方式 columnsToDisplay

我更改了以下行：

columnsToDisplay: ['id', 'columnName', 'hidden'];

至

columnsToDisplay = ['id', 'columnName', 'hidden'];

问题就解决了。

还在学习打字稿！