Question

使用Material的表格指南

时遇到问题

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

我按照示例进行操作，并在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)

这是我的密码：

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>

我可能会出错？我按照说明去了发球台

Answer 1

使用此设置它起作用：

<div class="example-container mat-elevation-z8">
  <div class="example-header">
    <mat-form-field>
      <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
    </mat-form-field>
  </div>
  <mat-table #table [dataSource]="dataSource">
    <ng-container matColumnDef="siteId">
      <mat-header-cell *matHeaderCellDef> siteId </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.siteId}} </mat-cell>
    </ng-container>
    <ng-container matColumnDef="importDate">
      <mat-header-cell *matHeaderCellDef> importDate </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.importDate}} </mat-cell>
    </ng-container>
    <ng-container matColumnDef="poPoNumber">
      <mat-header-cell *matHeaderCellDef> poPoNumber </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.poPoNumber}} </mat-cell>
    </ng-container>
    <ng-container matColumnDef="poPrice">
      <mat-header-cell *matHeaderCellDef> poPrice </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.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>

将材料表集成到Angular 5 Cli中

1 个答案: