Angular :: mat-table - Неразрешенная переменная

Question

Я получаю Unresolved переменную stationId и Unresolved переменную исключения улицы + таблица полностью пуста (даже без головы). Консоль не имеет ошибок. Запрос к серверу данных был успешным.

Таблица html:

<table mat-table [dataSource]="stations" class="mat-elevation-z8">

  <ng-container matColumnDef="stationId">
    <th mat-header-cell *matHeaderCellDef>stationId</th>
    <td mat-cell *matCellDef="let element"> {{element.stationId}} </td>
  </ng-container>

  <ng-container matColumnDef="operator">
    <th mat-header-cell *matHeaderCellDef>operator</th>
    <td mat-cell *matCellDef="let element"> {{element.operator}} </td>
  </ng-container>

  <ng-container matColumnDef="city">
    <th mat-header-cell *matHeaderCellDef>city</th>
    <td mat-cell *matCellDef="let element"> {{element.city}} </td>
  </ng-container>

  <ng-container matColumnDef="address">
    <th mat-header-cell *matHeaderCellDef>address</th>
    <td mat-cell *matCellDef="let element"> {{element.street}} </td>
  </ng-container>

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

Таблица ts:

export class StationsComponent implements OnInit {
  title = "STK";
  stations: MatTableDataSource<StationsInterface>;
  paginator: MatPaginator;
  displayedColumns: ["stationId", "operator", "city", "address"];

  constructor(@Inject("StationsAPIService") private stationService: StationsAPIService) {
  }

  ngOnInit() {
    this.stationService.getStations().subscribe(stations => {
      this.stations = new MatTableDataSource(stations);
      this.stations.paginator = this.paginator;
      console.log(stations);
    });
  }

}

Интерфейс станции:

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;
}

Когда я использую один и тот же источник данных без mat-таблицы и ng-контейнеров, строки отображаются очень хорошо. Может кто-нибудь помочь мне исправить это, пожалуйста? Заранее спасибо.

Upd .: Я также получаю эту ошибку при попытке сделать renderRows ():

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'dataSource: [object Object]'. Current value: 'dataSource: undefined

Answer 1

Я думаю, это потому, что ваш displayedColumns не определен

Попробуйте

displayedColumns = ["stationId", "operator", "city", "address"];

вместо

displayedColumns: ["stationId", "operator", "city", "address"];

Answer 2

Попробуйте использовать async pipe:

<table mat-table [dataSource]="stations$ | async" class="mat-elevation-z8">

export class StationsComponent {
  title = "STK";
  stations: MatTableDataSource<StationsInterface>;
  paginator: MatPaginator;
  displayedColumns: ["stationId", "operator", "city", "address"];

  readonly stations$ = this.stationService.getStations().pipe(
    map((stations) => {
      const source =  new MatTableDataSource(stations);
      source.paginator = this.paginator;
    }),
    shareReplay({ refCount: true, bufferSize: 0 })
  );

  constructor(@Inject("StationsAPIService") private stationService: StationsAPIService) {
  }
}

Я пропускаю paginator в шаблоне, вы уверены, что он есть?