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

Question

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

Table 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>

Table 时间：

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-containers 的相同数据源时，行呈现得很好。谁能帮我解决这个问题？提前谢谢你。

更新：我在尝试 renderRows():

时也遇到了这个错误

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

Answer 1

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

Answer 2

我认为这是因为你的 displayedColumns 未定义

尝试

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

而不是

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

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

Angular:: mat-table - Unresolved variable

angular

mat-table