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

【问题标题】：Angular Material - Missing definitions for header, footer, and row; cannot determine which columns should be renderedAngular Material - 缺少页眉、页脚和行的定义；无法确定应呈现哪些列
【发布时间】：2020-06-22 03:32:31
【问题描述】：

我在使用 Angular Material 的表格组件时遇到错误。我在here 之前看到过这个问题，但即使按照建议的修复方法，我仍然会收到错误消息。

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

这是我的表格 HTML 代码：

<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();
  }

}

【问题讨论】：

dev.to/jwp/angular-material-table-in-20-minutes-15f4

标签： angular angular-material angular-material-table

【解决方案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

【讨论】：

这就是我正在做的。你没看到我的代码吗？我也尝试过在没有 HTML 表格元素的情况下使用它，但它并没有改变任何事情。错误仍然存在。我的实现几乎与material.angular.io/components/table/examples 上的示例完全相同。唯一的区别是显示的字符串。

【解决方案2】：

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

【讨论】：