Angular Material - 缺少页眉、页脚和行的定义；无法确定应呈现哪些列

Question

我在使用 Angular Material 的 table 组件时遇到错误。我在之前看到过这个问题，但即使按照建议的修复方法进行操作后，我仍然遇到错误。

错误错误：缺少页眉、页脚和行的定义；无法确定应呈现哪些列。

这是我的 HTML table 代码：

<table mat-table [dataSource]="customers" class="mat-elevation-z8">

        <!-- Position Column -->
        <ng-container matColumnDef="Name">
          <th mat-header-cell *matHeaderCellDef> Name </th>
          <td mat-cell *matCellDef="let customer"> {{ customer?.name }} </td>
        </ng-container>

        <!-- Name Column -->
        <ng-container matColumnDef="Email">
          <th mat-header-cell *matHeaderCellDef> Email </th>
          <td mat-cell *matCellDef="let customer"> {{ customer?.email }} </td>
        </ng-container>

        <!-- Weight Column -->
        <ng-container matColumnDef="Phone number">
          <th mat-header-cell *matHeaderCellDef> Phone number </th>
          <td mat-cell *matCellDef="let customer"> {{ customer?.phone.number }} </td>
        </ng-container>

        <!-- Symbol Column -->
        <ng-container matColumnDef="Notes">
          <th mat-header-cell *matHeaderCellDef> Notes </th>
          <td mat-cell *matCellDef="let customer"> {{ customer?.notes }} </td>
        </ng-container>

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

这是我的组件 TypeScript 文件：

import { Component, OnInit } from '@angular/core';
import { Customer } from '../customers.types';
import { Router, ActivatedRoute } from '@angular/router';
import { CustomersService } from '../customers.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-customers-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.scss']
})
export class CustomersListComponent implements OnInit {
  customersSub: Subscription;
  detailsSub: Subscription;
  displayedColumns: string[] = [ 'Name', 'Email', 'Phone number', 'Notes' ];
  customers: Customer[] = [];
  customersLength: number;
  loadingMode: boolean = false;
  openDetailsDrawer: boolean = false;
  detailsId: string;

  constructor(private _router: Router,
              private _route: ActivatedRoute,
              public _customersService: CustomersService) { }

  ngOnInit(): void {
      this.loadingMode = true;
      this._route.queryParams.subscribe(params =>{
          this.detailsId = this._route.snapshot.params['id'];
      });

      this._customersService.getCustomers();
      this.customersSub = this._customersService.getCustomersUpdateListener()
          .subscribe((customers: Customer[]) => {
              this.loadingMode = false;
              this.customers = customers;
              this.customersLength = customers.length;
      });

      this.detailsSub = this._customersService.getDetailsUpdateListener()
          .subscribe((bool: boolean) => {
              this.openDetailsDrawer = bool;
      });
  }

  ngOnDestroy(): void {
      this.detailsSub.unsubscribe()
  }

  onOpenDetails(_id: string) {
      this._customersService.openDetails(_id);
  }

  onOpenCreate() {
      this._customersService.openCreate();
  }

}

Answer 1

您需要在模板中指定列数组，如下所示：

模板文件

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

和控制器文件

displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];

查看示例中的所有文件： https://material.angular.io/components/table/examples

Answer 2

我让它工作了，但不太确定如何或为什么。我重新启动了客户端，这是我做过几次都没有成功的事情。不过这次有所不同。我没有更改任何代码。现在它可以完美地工作，使用静态对象数组或可观察对象。

Angular Material - 缺少页眉、页脚和行的定义；无法确定应呈现哪些列

Angular Material - Missing definitions for header, footer, and row; cannot determine which columns should be rendered

angular

angular-material

angular-material-table