Angular Material Table：“无法绑定到‘dataSource’，因为它不是‘table’的已知属性”

Question

我正在尝试从 Angular [电子邮件受保护] 在我的 Angular 应用程序中添加表格（如此处所示）。

我复制/粘贴了 Angular Material 官方文档中的代码，但仍然收到错误：

无法绑定到“dataSource”，因为它不是“table”的已知属性

我尝试了以下方法：

用 mat-table 替换 table 标签，结果是

mat-table 不是已知元素

删除

[dataSource]="dataSource"

中的括号为

dataSource="dataSource"

，导致（这次Web开发者控制台错误，这可能是解决方案，但即使经过一些搜索我也不知道如何修复它）

无法绑定到“matHeaderRowDef”，因为它不是“tr”的已知属性（在“_UsersComponent”组件模板中使用）。

从

MatTableModule

导入

'@angular/material'

而不是

'@angular/material/table'

中的

app.module.ts

，导致

@angular/material 没有导出成员 MatTableModule

添加

import {CdkTableModule} from '@angular/cdk/table';

并导入它，不做任何更改。

MatTableModule

在

app.module.ts

中声明和导入，使用它的

UsersComponent

也被声明和导入。

以下是项目中使用的所有版本：

@Angular-devkit/架构师0.1702.2

@Angular-devkit/构建-Angular 17.2.2

@Angular-devkit/核心17.2.2

@Angular-devkit/原理图17.2.2

@角度/cdk 17.2.1

@角度/cli 17.2.2

@角度/材料17.2.1

@schematics/角度17.2.2

rxjs 7.8.1

打字稿5.3.3

zone.js 0.14.4

这是我的

app.module.ts

文件内容：

import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { BrowserModule } from '@angular/platform-browser';

import { MatListModule } from '@angular/material/list';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatSidenavModule } from '@angular/material/sidenav';

import { AppComponent } from './app.component';
import { TopbarComponent } from './topbar/topbar.component';
import { LeftmenuComponent } from './leftmenu/leftmenu.component';
import { NavleftbarComponent } from './navleftbar/navleftbar.component';

import { MatIconModule } from '@angular/material/icon';
import {MatTableModule} from '@angular/material/table';
import { MatButtonModule } from '@angular/material/button';
import {CdkTableModule} from '@angular/cdk/table';

import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { UsersComponent } from './users/users.component';

@NgModule({
  declarations: [
    AppComponent,
    TopbarComponent,
    LeftmenuComponent,
    NavleftbarComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MatToolbarModule,
    MatSidenavModule,
    MatListModule,
    MatButtonModule,
    MatIconModule,
    MatTableModule,
    UsersComponent,
    CdkTableModule
  ],
  providers: [
    provideAnimationsAsync()
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

这是

users.component.ts

的文件内容：

import { Component } from '@angular/core';
import { MatTableModule } from '@angular/material/table';

export interface UserElement {
  firstname: string;
  lastName: string;
  email: string;
  microsoftEmail: string;
  class: string;
}

const ELEMENT_DATA: UserElement[] = [{
  firstname: "Pierrick",
  lastName: "MARTELLIERE",
  email: "[email protected]",
  microsoftEmail: "[email protected]",
  class: "GPME24"
}];

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrl: './users.component.css',
  standalone: true,
})

export class UsersComponent {
  displayedColumns: string[] = ['firstName', 'lastName', 'email', 'microsoftEmail', 'class'];
  dataSource = ELEMENT_DATA;
  clickedRows = new Set<UserElement>();
}

还有 users.component.html：

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8 demo-table">
  <ng-container matColumnDef="firstName">
    <th mat-header-cell *matHeaderCellDef> Prénom </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>

  <ng-container matColumnDef="lastName">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <ng-container matColumnDef="email">
    <th mat-header-cell *matHeaderCellDef> Email </th>
    <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
  </ng-container>

  <ng-container matColumnDef="microsoftEmail">
    <th mat-header-cell *matHeaderCellDef> Compte Microsoft </th>
    <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
  </ng-container>

  <ng-container matColumnDef="class">
    <th mat-header-cell *matHeaderCellDef> Classe </th>
    <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
  </ng-container>

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



<!-- Copyright 2024 Google LLC. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at https://angular.io/license -->

我真的不明白我错过了什么，欢迎一些帮助。

Answer 1

您的组件是一个独立的组件。

来自您的来源：

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrl: './users.component.css',
  standalone: true, // ---> Standalone!
})

这意味着它充当自己的模块。您应该在此处导入 MatTable，而不是您的应用程序模块。

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrl: './users.component.css',
  standalone: true,
  imports: [MatTableModule], // ---> import done directly here!
})

另一个选择，也许您不想要独立组件？因为我在您的 AppModule 导入中看到它。然后，您只需删除其声明中的

standlone:true

部分即可。

Answer 2

UserElement 没有属性 {{element.position}} {{element.name}} {{element.weight}}... 更改它 {{element.firstName}} {{element.lastName}}