时间戳

首页 > 解决方案 > 基本角度材料表显示测试数据，但不是我的数据

angular - 基本角度材料表显示测试数据，但不是我的数据

问题描述

该表显示了使用测试对象数组时应该显示的数据，但在使用表中我需要的实际对象数组时却没有，我无法弄清楚我错过了什么！

这是测试数组：

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)至可以返回数组，但是当我设置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;
      });
    }

我很困惑......请帮助

标签： angularangular-materialangular-material-table

解决方案

在 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;
  });
}

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

推荐阅读