如何在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;
  }

data $方法：

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方式

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

  

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

data$: Observable<Company[]>;

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

然后在模板中添加$。

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