Angular:：mat-table -未解析变量

Question

我得到了未解决的变量stationId和未解决的变量街异常+表是完全空的(即使没有头)。控制台没有任何错误。对数据服务器的请求成功。

表格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-table和ng- dataSource的相同容器时，行呈现得很好。有谁能帮我修一下吗？提前谢谢你。

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管道：

<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，你确定它在那里吗？