角度材质表：类型“ContentComponent”上不存在属性“displayedColumns”

Question

问题陈述

我有一个 Angular 材料表，我想显示数据，但它在这些行上中断：

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

并说：

类型“ContentComponent”上不存在属性“displayedColumns”。

---

代码

超文本标记语言

<mat-table [dataSource]="students">

    <ng-container>
        <mat-header-cell *matHeaderCellDef>First name</mat-header-cell>
        <mat-cell *matCellDef="let student"> {{student.firstName}} </mat-cell>
    </ng-container>

    <ng-container>
        <mat-header-cell *matHeaderCellDef>Last name</mat-header-cell>
        <mat-cell *matCellDef="let student"> {{student.lastName}} </mat-cell>
    </ng-container>

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

---

.TS文件

import { Component, OnInit, Input } from '@angular/core';
import { Student } from '../Models/Student';

@Component({
  selector: 'app-content',
  templateUrl: './content.component.html',
  styleUrls: ['./content.component.css']
})
export class ContentComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

  @Input() students: Student[] = [
    {
      firstName: 'Codo',
      lastName: 'Pal',
      studentId: 1,
      campus: 'XYZ',
      grade: {
        average: 100,
        percent: 100,
        letter: 'A+'
      }
    },
    {
      firstName: 'Jonny',
      lastName: 'BeGood',
      studentId: 2,
      campus: 'XYZ',
      grade: {
        average: 80,
        percent: 80,
        letter: 'B'
      }
    },
    {
      firstName: 'Jonny',
      lastName: 'Cash',
      studentId: 3,
      campus: 'XYZ',
      grade: {
        average: 20,
        percent: 20,
        letter: 'F-'
      }
    }
  ];
}

应用程序模块.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MatTableModule } from '@angular/material/table';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { ContentComponent } from './content/content.component';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    ContentComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MatTableModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

---

我尝试过的

• https://blog.angular-university.io/angular-material-data-table/

• https://github.com/angular/components/issues/11427

• Angular 6 <table mat-table> 的未知属性（我之前将表声明为 as<table>而不是<mat-table>）

• 正如第三个项目符号中提到的，我更改了表格（以及所有子元素为角度材质指令），但它不起作用。

Answer 1

您应该为列命名并将 displayedColumns 字段设置为要显示的列的数组

<ng-container matColumnDef="firstName"> <!-- <---- here on the left is a name - "firstName" -->
    <mat-header-cell *matHeaderCellDef>First name</mat-header-cell>
    <mat-cell *matCellDef="let student"> {{student.firstName}} </mat-cell>
</ng-container>

export class ContentComponent implements OnInit {
  displayedColumns = ['firstName']; // here we say that we want to just display 1 column - firstName