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

Question

问题陈述

我有一个 Angular 材料表，我想显示数据，但它在以下几行中断：

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

然后说：

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

---

代码

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>）

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

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