如何在 Angular Material 表中显示数据？

Question

我在通过 Angular 材料显示列表时遇到问题。列表内容不显示，而标题显示。
组件：

export class CompaniesComponent implements OnInit {
  displayedColumns: string[] = ['id'];
  data: Company[] = [];
  isLoadingResults = true;

  constructor(private api: ApiService) { }

  ngOnInit() {
    this.api.getAllCompanies()
    .subscribe(res => {
      this.data = res;
      console.log(this.data);
      this.isLoadingResults = false;
    }, err => {
      console.log(err);
      this.isLoadingResults = false;
    });
  }

}

html:

<div class="example-container mat-elevation-z8">
  <div class="example-loading-shade"
       *ngIf="isLoadingResults">
    <mat-spinner *ngIf="isLoadingResults"></mat-spinner>
  </div>
  <div class="mat-elevation-z8">
    <table mat-table [dataSource]="data" class="example-table"
           matSort matSortActive="id" matSortDisableClear matSortDirection="asc">

      <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef>Id</th>
        <td mat-cell *matCellDef="let row">{{row.Id}}</td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    </table>
  </div>
</div>

结果：

列表元素格式（json）：

   {
        "id": 21,
        "companyName": "iErjVkVG",
        "companyDescription": "12345",
        "rating": 1,
        "companyValuation": 756,
        "salary": 3.22,
        "professionalGrowth": 2.56,
        "companyBenefits": 2.44,
        "communicationWithColleagues": 2.67,
        "educationSector": 3.11,
        "numberOfVotes": 0
    }

有人可以指出我做错了什么，因为似乎根本不应该出现问题
更新
公司等级：

export class Company {
    Id: number;
    CompanyName: string;
    CompanyDescription: string;
    Rating: number;
    CompanyValuation: number;
    Salary: number;
    ProfessionalGrowth: number;
    CompanyBenefits: number;
    CommunicationWithColleagues: number;
    EducationSector: number;
  }

数据$方法：

export class CompaniesComponent implements OnInit {

  displayedColumns: string[] = ['id'];//, 'companyName'];

  data$: Observable<Company[]>;
  isLoadingResults = true;


  constructor(private api: ApiService) { }

  ngOnInit() {

    this.data$ = this.api.getAllCompanies();
    console.log(this.data$);
  }

}

和html：

 <table mat-table #table [dataSource]="data$" class="example-table"
           matSort matSortActive="id" matSortDisableClear matSortDirection="asc">

Answer 1

关于 Angular 材料 documentation，您必须在更改数据数组后调用 renderRows()。

如果提供了数据数组，则必须在添加、删除或移动数组的对象时通知表。这可以通过调用 renderRows() 函数来完成，该函数将呈现自上次表渲染以来的差异。如果数据数组引用发生变化，表格会自动触发行的更新。

array 方式

所以要么尝试导入 MatTable 并获取它的参考

import {MatTable} from '@angular/material';

使用ViewChild获取表引用

@ViewChild(MatTable) tableReference: MatTable<Company>;

contructor(...) {}

this.api.getAllCompanies().subscribe(res => {
  this.data = res;
  this.tableReference.renderRows();
}

并将#table 引用添加到表格标签，如<table mat-table #table>。使用这种方法，您还必须确保 observable 完成或取消订阅。

observable 方式

或者（我认为）更好的方法，传入 dataSource 对象或可观察对象而不是数组。

提供 Observable 流时，当流发出新的数据数组时，表会自动触发更新。

data$: Observable<Company[]>;

ngOnInit() {
  this.data$ = this.api.getAllCompanies().pipe(
    finalize(() => {
      this.isLoadingResults = false;
    })
  );
}

然后在您的模板中添加$。

<table mat-table [dataSource]="data$" ...>