title: Angular:: mat-table - Unresolved variable
body: <p>I'm getting Unresolved variable stationId and Unresolved variable street exceptions + the table is completely empty (even without the head). The console doesn't have any errors. The request to data server was successful.</p>
  
  <p>Table html:</p>
  
  <pre><code>&lt;table mat-table [dataSource]="stations" class="mat-elevation-z8"&gt;
  
    &lt;ng-container matColumnDef="stationId"&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt;stationId&lt;/th&gt;
      &lt;td mat-cell *matCellDef="let element"&gt; {{element.stationId}} &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;ng-container matColumnDef="operator"&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt;operator&lt;/th&gt;
      &lt;td mat-cell *matCellDef="let element"&gt; {{element.operator}} &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;ng-container matColumnDef="city"&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt;city&lt;/th&gt;
      &lt;td mat-cell *matCellDef="let element"&gt; {{element.city}} &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;ng-container matColumnDef="address"&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt;address&lt;/th&gt;
      &lt;td mat-cell *matCellDef="let element"&gt; {{element.street}} &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;tr mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/tr&gt;
    &lt;tr mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Table ts:</p>
  
  <pre><code>export class StationsComponent implements OnInit {
    title = "STK";
    stations: MatTableDataSource&lt;StationsInterface&gt;;
    paginator: MatPaginator;
    displayedColumns: ["stationId", "operator", "city", "address"];
  
    constructor(@Inject("StationsAPIService") private stationService: StationsAPIService) {
    }
  
    ngOnInit() {
      this.stationService.getStations().subscribe(stations =&gt; {
        this.stations = new MatTableDataSource(stations);
        this.stations.paginator = this.paginator;
        console.log(stations);
      });
    }
  
  }
  </code></pre>
  
  <p>Station Interface:</p>
  
  <pre><code>export interface StationsInterface {
    stationId: number;
    scopeOfApproval: string;
    postalCode: string;
    city: string;
    street: string;
    operator: string;
    telephoneNumber: string;
    email: string;
    community: string;
    district: string;
    region: string;
  }
  </code></pre>
  
  <p>When I use the same dataSource without mat-table and ng-containers, the rows are rendering just fine. 
  Can anyone help me fix it please? Thank you in advance.</p>
  
  <p>Upd.:
  I'm also getting this error when trying to renderRows():</p>
  
  <pre><code>ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'dataSource: [object Object]'. Current value: 'dataSource: undefined
  </code></pre>