将材料表集成到 Angular 5 Cli 中

材料表指南有问题

我遵循了他们的基本表集成，但我无法摆脱错误。

我遵循了示例并在以下位置进行了指导：https : //material.angular.io/components/table/examples

在我的app.module.ts我已经添加并导入了这两个：

import {MatTableModule} from '@angular/material/table';
import { CdkTableModule } from '@angular/cdk/table';

我已经改变了我tsconfig.json的目标行（到“es5”）：

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  },
  "include": [
    "src/**/*.ts"
  ]
}

根据：https : //github.com/angular/material2/issues/9813

但我有一个浏览器控制台错误：

core.js:1448 ERROR Error: Could not find column with id "siteId".
    at getTableUnknownColumnError (table.es5.js:337)
    at eval (table.es5.js:1005)
    at Array.map (<anonymous>)
    at MatTable.CdkTable._getHeaderCellTemplatesForRow (table.es5.js:1002)
    at MatTable.CdkTable._renderHeaderRow (table.es5.js:884)
    at MatTable.CdkTable.ngAfterContentChecked (table.es5.js:571)
    at callProviderLifecycles (core.js:12702)
    at callElementProvidersLifecycles (core.js:12673)
    at callLifecycleHooksChildrenFirst (core.js:12656)
    at checkAndUpdateView (core.js:13806)

这是我的 ts 代码：

import {AfterViewInit, Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { ApiConnectService } from '../../../../assets/services/api.connect.service';
import {IsTopBarOpenedService} from '../../../../assets/services/is.top.bar.opened.service';
import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';


@Component({
  selector: 'app-menu3',
  templateUrl: './menu3.revue.des.commandes.component.html',
  styleUrls: ['./menu3.revue.des.commandes.component.scss']
})
export class Menu3 implements OnInit, AfterViewInit {

  // @ViewChild(MatPaginator) paginator: MatPaginator;
  // @ViewChild(MatSort) sort: MatSort;
  dataSource: MatTableDataSource<any>;
  displayedColumns = ['siteId', 'importDate', 'poPoNumber', 'poPrice'];

  constructor(private _api: ApiConnectService) {
  }

  ngOnInit() {
    this._api.getStates()
      .subscribe(data => {
        this.dataSource = new MatTableDataSource(data);
      }, err => {
        console.log(err);
      });
  }
}

这是我的 html ：

  <div [ngClass]="opened + ''">
    <div *ngIf="myItems">
      <div>
        <mat-table [dataSource]="dataSource">
          <ng-container matColumnDef="siteId">
            <mat-header-cell *matHeaderCellDef> Site id </mat-header-cell>
            <mat-cell *matCellDef="let row"> {{row.siteId}} </mat-cell>
          </ng-container>
          <ng-container matColumnDef="poPoNumber">
            <mat-header-cell *matHeaderCellDef> Phone </mat-header-cell>
            <mat-cell *matCellDef="let row"> {{row.poPoNumber}} </mat-cell>
          </ng-container>
          <ng-container matColumnDef="poPrice">
            <mat-header-cell *matHeaderCellDef> Company </mat-header-cell>
            <mat-cell *matCellDef="let row"> {{row.poPrice}} </mat-cell>
          </ng-container>
          <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
          <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
        </mat-table>
      </div>
    </div>
  </div>

我有什么问题？我按照说明去了发球台