Angular mat-table Error: Could not find column with id "id"

Question

import {Component, OnInit, ViewChild} from '@angular/core';
import {MatSort, MatPaginator} from '@angular/material';
import {merge, Observable, of as observableOf} from 'rxjs';
import {catchError, map, startWith, switchMap} from 'rxjs/operators';
import {PersonModel, RosterPeopleApi, DaoModule} from '../dao/dao.module';



@Component({
  selector: 'app-people',
  templateUrl: './people.component.html',
  styleUrls: ['./people.component.css']
})
export class PeopleComponent implements OnInit {
 dao: DaoModule|null;
displayedColumns: string[] = ['id', 'lastName', 'firstName', 'middleName', 'birthDate'];
data: PersonModel[];
resultsLength = 0;
  isLoadingResults = true;
isConnectionError = true;

@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
  constructor(dao: DaoModule) {this.dao = dao; }

  ngOnInit() {
    this.paginator.pageSize = 30;
    merge(this.sort.sortChange, this.paginator.page)
      .pipe(
        startWith({}),
        switchMap(() => {
          this.isLoadingResults = true;
          return this.dao.GetPeopleFromRoster(this.sort.active, this.sort.direction,
            this.paginator.pageIndex, this.paginator.pageSize);
        }),
        map(data => {
          this.isLoadingResults = false;
          this.isConnectionError = false;
          return data;
        })
      )
      .subscribe(data => {
        this.resultsLength = data.totalCount;
        this.data = data.people;
      });
  }

<div class="container mat-elevation-z8">
  <div class="loading-shade" *ngIf="isLoadingResults || isConnectionError">
<mat-spinner *ngIf="isLoadingResults"></mat-spinner>
    <div class="connection-error" *ngIf="isConnectionError">
      Connection error! Try again later!
    </div>
  </div>

  <div class="table-container">

    <table mat-table [dataSource]="data" class="table"  matSort matSortActive="firstName" 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>
      <ng-container matColumnDef="firstName">
        <th mat-header-cell *matHeaderCellDef>firstName</th>
        <td mat-cell *matCellDef="let row">{{row.firstName}}</td>
      </ng-container>
      <ng-container matColumnDef="lastName">
        <th mat-header-cell *matHeaderCellDef>lastName</th>
        <td mat-cell *matCellDef="let row">{{row.lastName}}</td>
      </ng-container>
      <ng-container matColumnDef="middleName">
        <th mat-header-cell *matHeaderCellDef>middleName</th>
        <td mat-cell *matCellDef="let row">{{row.middleName}}</td>
      </ng-container>
      <ng-container matColumnDef="birthDate">
        <th mat-header-cell *matHeaderCellDef>birthDate</th>
        <td mat-cell *matCellDef="let row">{{row.birthDate | date}}</td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="this.displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
  </div>
  <mat-paginator [length]="resultsLength" [pageSize]="30"></mat-paginator>
</div>

This causes an error. The only solution i found is "fix displayedColumns". But according to JSON everything is OK.

[ { "id": 1, "firstName": "FirstName1", "lastName": "LastName1", "middleName": "MiddleName1", "birthDate": "2018-07-17T12:58:53.7942318+03:00" }, { "id": 2, "firstName": "FirstName2", "lastName": "LastName2", "middleName": "MiddleName2", "birthDate": "2018-07-17T12:58:53.8410577+03:00" }, { "id": 3, "firstName": "FirstName3", "lastName": "LastName3", "middleName": "MiddleName3", "birthDate": "2018-07-17T12:58:53.8418257+03:00" } ]

How can i fix it?

Answer 1

In my case, I moved the code from ngOnInit() to ngAfterViewInit().