Angular Material 表 : Property 'displayedColumns' does not exist on type 'ContentComponent'

Question

问题陈述
我有一个 Angular Material 表，我想显示数据，但它在以下几行中断:

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

并说:

Property 'displayedColumns' does not exist on type 'ContentComponent'.

代码
HTML

<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-'
      }
    }
  ];
}

app.module.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

unknown properties of angular 6 <table mat-table> (我之前将我的表声明为 <table> 而不是 <mat-table> )

正如第三个项目符号中提到的，我将我的表格(以及所有子元素更改为 Angular Material 指令)，但它不起作用。

Answer 1

您应该命名您的列，并使 displayColumns 字段成为您要显示的列的数组

<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