Basi c Angular Таблица материалов показывает данные испытаний, но не мои данные - PullRequest
Новая
       12

Basi c Angular Таблица материалов показывает данные испытаний, но не мои данные

1 голос
/ 13 февраля 2020

Таблица показывает данные, которые должны использоваться при использовании массива тестовых объектов, но не при использовании фактического массива объектов, который мне нужен в таблице, и я не могу понять, чего мне не хватает!

Это тестовый массив: 

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 также является массивом объектов с каждым объектом, содержащим поле с ключом «компания», как массив 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;
      });
    }

Я сбит с толку ... пожалуйста, помогите

Ответы [ 3 ]

2 голосов
/ 13 февраля 2020

сделать это в функции 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;
  });
}

и где код, который он получает из бэкэнда? если вы подписываетесь, убедитесь, что этот код указан в подписке

0 голосов
/ 13 февраля 2020

Попробуйте -ChangeDetectorRef, иногда angular будет не принимать обновленные данные, 

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

constructor(private cd : ChangeDetectorRef){}

, где привязка внутренних данных к источнику данных добавляет cd.detectChanges, как это, 

displayedColumns = ['company'];
dataSource = this.sites;
this.cd.detectChanges();
0 голосов
/ 13 февраля 2020

Попробуйте назначить this.dataSource вместо просто dataSource ie. заменить dataSource = this.sites на this.dataSource = this.sites

...