Basic Angular Material table 显示的是测试数据，但不是我的数据

Question

table 显示了它在使用测试对象数组时应该显示的数据，但在 table 中使用我需要的实际对象数组时却没有，我想不通找出我所缺少的！

这是测试数组：

export interface TestData {
  compa: string;
  company: string;
}

const TEST_DATA: TestData[] = [
  {compa: 'blah', company: 'blahblahblah'},
  {compa: 'blah2', company: 's'},
  {compa: 'blah23', company: 's'},
  {compa: 'blah234', company: 's'},
  {compa: 'blah2345', company: 'fads'}
];

displayedColumns = ['company'];
dataSource = TEST_DATA;

...当尝试只显示公司时，它成功了

<table mat-table [dataSource]="dataSource">
  <ng-container matColumnDef="company">
    <th mat-header-cell *matHeaderCellDef> Company </th>
    <td mat-cell *matCellDef="let site"> {{ site.company }} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

'sites' 数组是从数据库中检索的，它的值设置为 OnInit:

sites: Site[] = [];

但这行不通：

displayedColumns = ['company'];
dataSource = this.sites;

... 尽管 this.sites 也是一个对象数组，每个对象都包含一个带有键 'company' 的字段，就像 TEST_DATA 数组一样。我什至可以 console.log(this.sites) 和它 returns 数组，但是当我设置 dataSource = this.sites，然后尝试 console.log(this.dataSource) 它是空的...... 这是从后端获取数据的代码

  ngOnInit() {
    this.sitesService.getUtilitySites('Evansville');
    this.sitesSub = this.sitesService
      .getSiteUpdatedListener()
      .subscribe((siteData: {sites: Site[]}) => {
        this.sites = siteData.sites;
        this.sitesLoaded = true;
      });
    }

我很困惑...请帮忙

Answer 1

尝试分配给 this.dataSource 而不是仅分配给 dataSource 即。将 dataSource = this.sites 替换为 this.dataSource = this.sites

Answer 2

在 NgOninit 函数中执行

ngOnInit() {
this.sitesService.getUtilitySites('Evansville');
this.sitesSub = this.sitesService
  .getSiteUpdatedListener()
  .subscribe((siteData: {sites: Site[]}) => {
    this.sites = siteData.sites;
    this.dataSource = siteData.sites;
    this.sitesLoaded = true;
  });
}

它从后端获取的代码在哪里？如果您订阅，请确保此代码在订阅中

Answer 3

尝试 -ChangeDetectorRef ，有时 angular 不会获取刷新数据，

import { ChangeDetectorRef  } from '@angular/core';

constructor(private cd : ChangeDetectorRef){}

其中后端数据绑定到数据源添加 cd.detectChanges 像这样，

displayedColumns = ['company'];
dataSource = this.sites;
this.cd.detectChanges();

Basic Angular Material table 显示的是测试数据，但不是我的数据

Basic Angular Material table is showing test data, but not my data

angular

angular-material

angular-material-table