angular - 垫表呈现行但不呈现数据

Question

我在我的项目中使用 Angular 5 和 Material mat-table。

在我的组件文件中，我使用 observable 从服务中检索数据并将其绑定(bind)到组件上的变量。 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'];

问题就解决了。

仍在学习 typescript !