title: Angular mat-table Error: Could not find column with id "id"
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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(() =&gt; {
            this.isLoadingResults = true;
            return this.dao.GetPeopleFromRoster(this.sort.active, this.sort.direction,
              this.paginator.pageIndex, this.paginator.pageSize);
          }),
          map(data =&gt; {
            this.isLoadingResults = false;
            this.isConnectionError = false;
            return data;
          })
        )
        .subscribe(data =&gt; {
          this.resultsLength = data.totalCount;
          this.data = data.people;
        });
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container mat-elevation-z8"&gt;
    &lt;div class="loading-shade" *ngIf="isLoadingResults || isConnectionError"&gt;
  &lt;mat-spinner *ngIf="isLoadingResults"&gt;&lt;/mat-spinner&gt;
      &lt;div class="connection-error" *ngIf="isConnectionError"&gt;
        Connection error! Try again later!
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="table-container"&gt;
  
      &lt;table mat-table [dataSource]="data" class="table"  matSort matSortActive="firstName" matSortDisableClear matSortDirection="asc"&gt;
  
        &lt;ng-container matColumnDef="id"&gt;
          &lt;th mat-header-cell *matHeaderCellDef&gt; id &lt;/th&gt;
          &lt;td mat-cell *matCellDef="let row"&gt;{{row.id}}&lt;/td&gt;
        &lt;/ng-container&gt;
        &lt;ng-container matColumnDef="firstName"&gt;
          &lt;th mat-header-cell *matHeaderCellDef&gt;firstName&lt;/th&gt;
          &lt;td mat-cell *matCellDef="let row"&gt;{{row.firstName}}&lt;/td&gt;
        &lt;/ng-container&gt;
        &lt;ng-container matColumnDef="lastName"&gt;
          &lt;th mat-header-cell *matHeaderCellDef&gt;lastName&lt;/th&gt;
          &lt;td mat-cell *matCellDef="let row"&gt;{{row.lastName}}&lt;/td&gt;
        &lt;/ng-container&gt;
        &lt;ng-container matColumnDef="middleName"&gt;
          &lt;th mat-header-cell *matHeaderCellDef&gt;middleName&lt;/th&gt;
          &lt;td mat-cell *matCellDef="let row"&gt;{{row.middleName}}&lt;/td&gt;
        &lt;/ng-container&gt;
        &lt;ng-container matColumnDef="birthDate"&gt;
          &lt;th mat-header-cell *matHeaderCellDef&gt;birthDate&lt;/th&gt;
          &lt;td mat-cell *matCellDef="let row"&gt;{{row.birthDate | date}}&lt;/td&gt;
        &lt;/ng-container&gt;
        &lt;tr mat-header-row *matHeaderRowDef="this.displayedColumns"&gt;&lt;/tr&gt;
        &lt;tr mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/tr&gt;
      &lt;/table&gt;
    &lt;/div&gt;
    &lt;mat-paginator [length]="resultsLength" [pageSize]="30"&gt;&lt;/mat-paginator&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This causes an error. The only solution i found is "fix displayedColumns". But according to JSON everything is OK.</p>
  
  <blockquote>
    <p>[
      {
        "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"
      }
    ]</p>
  </blockquote>
  
  <p>How can i fix it?</p>