Question

我正在使用Angular 5＆amp;我项目中的材料垫表。

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

问题解决了。

还在学习打字稿！

Answer 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>时，会显示数据。

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

2 个答案: