Mat-table 呈现行但不呈现数据答案

【问题标题】：Mat-table renders rows but not dataMat-table 呈现行但不呈现数据
【发布时间】：2018-07-25 06:07:15
【问题描述】：

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

在我的组件文件中，我使用 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>

结果：

【问题讨论】：

标签： angular angular-material2

【解决方案1】：

罪魁祸首似乎是我声明columnsToDisplay的方式

我更改了以下行：

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

到

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

问题就解决了。

还在学习打字稿！

【讨论】：

感谢您发布此信息。我做了同样的事情，但看不到。
这是我第二次遇到这个问题，并且花费了令人尴尬的时间来寻找为什么我的 ng-containers 是空的。这也是这篇文章第二次为我指明了正确的方向。谢谢！
谢谢！伙计，这让我难倒了好久！肯定是错字，但我需要您的评论来仔细检查并发现它。

【解决方案2】：

使用角度材料 6 并遇到相同的问题。我正在使用 = not : 但仍然不显示数据。

columns: Column[] = new CommentColumns().columns;
displayedColumns = [...this.columns.map(x => x.columnDef)];

但是，当我将 <mat-table> 更改为 <table mat-table> 并将 <mat-row> 更改为 <tr mat-row> 时，会显示数据。

【讨论】：

一旦你有足够的声望，这可能应该是一个评论而不是一个答案。