材质表未渲染任何数据

Question

我正在尝试角材料表组件。由于某种原因，它不会在组件中渲染任何数据，给我一个错误

Could not find column with id "id"

。我无法理解这一点 - 我的数据中有一行包含

id

列。

我的内存数据服务提供商如下所示：

import { Injectable } from '@angular/core';
import { InMemoryDbService, RequestInfo } from 'angular-in-memory-web-api'
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class Contact {
  id!: string;
  name!: string;
  email!: string;

}

export class BackendService implements InMemoryDbService {

  constructor() { }
  createDb(reqInfo?: RequestInfo | undefined): {} | Observable<{}> | Promise<{}> {
    let contacts = [
      { id: 1, name: 'Contact 1', email: '[email protected]' },
      { id: 2, name: 'Contact 2', email: '[email protected]' },
      { id: 3, name: 'Contact 3', email: '[email protected]' },
      { id: 4, name: 'Contact 4', email: '[email protected]' }
    ];

    return { contacts };
  }
}

我的组件如下所示：

import { Component, OnInit, ViewChild } from '@angular/core';
import { ContactService } from '../contact.service';
import { firstValueFrom } from 'rxjs';
import { Contact } from '../backend.service';
import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';

const COLUMNS_SCHEMA = [
  {
    key: "id",
    type: "text",
    label: "Id"
  },
  {
    key: "name",
    type: "text",
    label: "Name"
  },
  {
    key: "email",
    type: "text",
    label: "E-mail"
  },
]
@Component({
  selector: 'app-contact-list',
  templateUrl: './contact-list.component.html',
  styleUrl: './contact-list.component.css'
})
export class ContactListComponent implements OnInit {
  @ViewChild('paginator') paginator!: MatPaginator;
  @ViewChild(MatSort) sort!: MatSort;

  dataSource!: MatTableDataSource<Contact>;
  displayedColumns: string[] = COLUMNS_SCHEMA.map((col) => col.key);
  columnsSchema: any = COLUMNS_SCHEMA;

  contacts: any[] = [];
  constructor(private contactService: ContactService) {

  }
  async ngOnInit(): Promise<void> {

    const data: any = await firstValueFrom(this.contactService.getContacts());
    console.log(data);
    this.contacts = data;

    this.dataSource = new MatTableDataSource(this.contacts);
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
    console.log(this.displayedColumns);
  }
}

最后我的模板如下所示：

<mat-table class="lessons-table mat-elevation-z8" [dataSource]="dataSource">
  <ng-container matColumnDef="date">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Id </mat-header-cell>
    <mat-cell *matCellDef="let contact">
      <input type="text" matInput [value]="contact.id" readonly>
    </mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>

  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>

</mat-table>

Answer 1

该错误提到您的

<mat-table>

中没有“id”的列定义。您必须定义

displayColumns

数组中提供的所有列。否则，从

displayColumns

数组中删除不需要的元素。

参考 定义列模板。

<mat-table class="lessons-table mat-elevation-z8" [dataSource]="dataSource">
  <ng-container matColumnDef="id">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Id </mat-header-cell>
    <mat-cell *matCellDef="let contact">
      <input type="text" matInput [value]="contact.id" readonly />
      {{ contact.id }}
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
    <mat-cell *matCellDef="let contact">
      <input type="text" matInput [value]="contact.name" readonly />
      {{ contact.name }}
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="email">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Email </mat-header-cell>
    <mat-cell *matCellDef="let contact">
      <input type="text" matInput [value]="contact.email" readonly />
      {{ contact.email }}
    </mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>

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

演示@StackBlitz