Таблица угловых материалов с пустыми строками

Question

Я пытаюсь интегрировать таблицу материалов Angular в новый проект, но по какой-то причине данные не отображаются, только пустые строки. Я использовал ту же логику в другом проекте, и там это работает, я потратил много времени, чтобы найти причину, но ничего не работает.

Мне нужно добавить таблицу в лениво загруженный модуль с именем " cores ", и я импортировал модуль таблицы материалов:

import { MatTableModule } from '@angular/material';
imports: [
    CommonModule,
    CoresRoutingModule,
    MatTableModule
  ]

Я создал сервисы, которые возвращают массив объектов «ICore»:

getCores(): Observable<ICore[]> {
    return this.http.get<ICore[]>('/cores');
  }

Интерфейс ICore :

export interface ICore {
  id: number;
  name: string;
}

HTML-код из моего файла " index.component.html ":

<mat-table [dataSource]="dataSource">
  <ng-container matColumnDef="id">
    <mat-header-cell *matHeaderCellDef> Id </mat-header-cell>
    <mat-cell *matCellDef="let core"> {{ core.id }}</mat-cell>
  </ng-container>
  <ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
    <mat-cell *matCellDef="let core"> {{ core.name }}</mat-cell>
  </ng-container>
  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

Логика из файла "index.components.ts":

dataSource = new MatTableDataSource<ICore>();
columnsToDisplay = ['id', 'name'];

constructor(private coreService: CoreService) { }

  ngOnInit() {
    this.coreService.getCores().subscribe(
      res => {
        this.dataSource.data = res;
        console.log(this.dataSource);
      },
      err => console.log(err)
    );
  }

Из моего console.log я вижу, что источник данных заполнен:

MatTableDataSource {_renderData: BehaviorSubject, _filter: BehaviorSubject, _internalPageChanges: Subject, _renderChangesSubscription: Subscriber, sortingDataAccessor: ƒ, …}
data: Array(3)
0: {id: 1, name: "core1"}
1: {id: 2, name: "core2"}
2: {id: 3, name: "core3"}

Я также попробовал этот метод:

dataSource = new CoreDataSource(this.coreService);
columnsToDisplay = ['id', 'name'];

constructor(private coreService: CoreService) { }

export class CoreDataSource extends DataSource<any> {   
    constructor(private coreService: CoreService) {
        super();
    }

  connect(): Observable<ICore[]> {
    console.log(this.coreService.getCores());
    return this.coreService.getCores();   }

  disconnect() {} }

Но с тем же результатом. Я чувствую, что это что-то глупое, что я забываю сделать, но я не нахожу это.

Заранее спасибо!

Answer 1

Убедитесь, что вы используете ту же переменную для отображения столбцов, которые вы определили в вашем компоненте.

Компонент:

columnsToDisplay = ['id', 'name'];

Шаблон:

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

Answer 2

Так как ваш источник данных находится в подпеременной данных, он не будет отображаться таким образом. Попробуйте следующий код

<mat-table [dataSource]="dataSource.data">
  <ng-container matColumnDef="id">
    <mat-header-cell *matHeaderCellDef> Id </mat-header-cell>
    <mat-cell *matCellDef="let core"> {{ core.id }}</mat-cell>
  </ng-container>
  <ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
    <mat-cell *matCellDef="let core"> {{ core.name }}</mat-cell>
  </ng-container>
  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>