無法綁定到“dataSource”，因為它不是“table”的已知屬性

Question

我是angular 5開發的新人。 我正在嘗試使用此處提供的示例使用 angular 材料開發 data.table：“ https://material.angular.io/components/table/examples ”。

我收到一條錯誤消息， Can't bind to 'dataSource' since it isn't a known property of 'table'.

請幫忙。

Answer 1

記得在app.module's imports中添加MatTableModule ，即

在 Angular 9+

import { MatTableModule } from '@angular/material/table'  

@NgModule({
  imports: [
    // ...
    MatTableModule
    // ...
  ]
})

小於 Angular 9

import { MatTableModule } from '@angular/material'  

@NgModule({
  imports: [
    // ...
    MatTableModule
    // ...
  ]
})

Answer 2

感謝@Jota.Toledo，我得到了創建表的解決方案。 請在下面找到工作代碼：

組件.html

<mat-table #table [dataSource]="dataSource" matSort>
  <ng-container matColumnDef="{{column.id}}" *ngFor="let column of columnNames">
    <mat-header-cell *matHeaderCellDef mat-sort-header> {{column.value}}</mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element[column.id]}}</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, ViewChild } from '@angular/core';
import { MatTableDataSource, MatSort } from '@angular/material';
import { DataSource } from '@angular/cdk/table';

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

  dataSource;
  displayedColumns = [];
  @ViewChild(MatSort) sort: MatSort;

  /**
   * Pre-defined columns list for user table
   */
  columnNames = [{
    id: 'position',
    value: 'No.',

  }, {
    id: 'name',
    value: 'Name',
  },
    {
      id: 'weight',
      value: 'Weight',
    },
    {
      id: 'symbol',
      value: 'Symbol',
    }];

  ngOnInit() {
    this.displayedColumns = this.columnNames.map(x => x.id);
    this.createTable();
  }

  createTable() {
    let tableArr: Element[] = [{ position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
      { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
      { position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },
      { position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' },
      { position: 5, name: 'Boron', weight: 10.811, symbol: 'B' },
      { position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C' },
    ];
    this.dataSource = new MatTableDataSource(tableArr);
    this.dataSource.sort = this.sort;
  }
}

export interface Element {
  position: number,
  name: string,
  weight: number,
  symbol: string
}

app.module.ts

imports: [
  MatSortModule,
  MatTableModule,
],

Answer 3

• 角核心 v6.0.2，
• 角材料，v6.0.2，
• Angular CLI v6.0.0（全局 v6.1.2）

我在運行ng test時遇到了這個問題，所以為了修復它，我添加到我的xyz.component.spec.ts文件中：

import { MatTableModule } from '@angular/material';

並將其添加到TestBed.configureTestingModule({})的imports部分：

beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ ReactiveFormsModule, HttpClientModule, RouterTestingModule, MatTableModule ],
      declarations: [ BookComponent ],
      schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
    })
    .compileComponents();
}));

Answer 4

如果您的“從 '@angular/material' 導入 { MatTableModule };” 位於共享模塊上，請確保將其導出。

共享模塊.ts：

import { MatTableModule } from '@angular/material' 

@NgModule({
  imports: [
    // ...
    MatTableModule
    // ...
  ],
  exports:[ MatTableModule ]
})

然后在您定義使用材料表的組件的自定義模塊上：

自定義模塊.ts：

@NgModule({
imports: [ sharedmodule ]     
})

Answer 5

材料示例使用了錯誤的表格標簽。 改變

<table mat-table></table>
<th mat-header-cell></th>
<td mat-cell></td>

<tr mat-header-row></tr>
<tr mat-row></tr>

至

<mat-table></mat-table>
<mat-header-cell></mat-header-cell>
<mat-cell></mat-cell>

<mat-header-row></<mat-header-row>
<mat-row></<mat-row>

Answer 6

對於角 7

檢查您的表格組件的位置。 就我而言，它位於 app/shared/tablecomponent 之類的位置，其中共享文件夾包含所有子組件但是我在 app.module.ts 的 Ngmodules 中導入了材料模塊，這是不正確的。 在這種情況下，Material 模塊應該被導入到 shared.module.ts 的 Ngmodules 中並且它可以工作。

不需要在角度 7 中將 'table' 更改為 'mat-table'。

Angular7 - 無法綁定到“dataSource”，因為它不是“mat-table”的已知屬性

Answer 7

就我而言，問題在於我沒有將包含數據源的組件放在主模塊的聲明中。

NgModule({
  imports: [
    EnterpriseConfigurationsRoutingModule,
    SharedModule
  ],
  declarations: [
    LegalCompanyTypeAssignComponent,
    LegalCompanyTypeAssignItemComponent,
    ProductsOfferedListComponent,
    ProductsOfferedItemComponent,
    CustomerCashWithdrawalRangeListComponent,
    CustomerCashWithdrawalRangeItemComponent,
    CustomerInitialAmountRangeListComponent,
    CustomerInitialAmountRangeItemComponent,
    CustomerAgeRangeListComponent,
    CustomerAgeRangeItemComponent,
    CustomerAccountCreditRangeListComponent, //<--This component contains the dataSource
    CustomerAccountCreditRangeItemComponent,
  

  ],

該組件包含數據源：

導出類 CustomerAccountCreditRangeListComponent 實現 OnInit {

  @ViewChild(MatPaginator) set paginator(paginator: MatPaginator){
    this.dataSource.paginator = paginator;
  }
  @ViewChild(MatSort) set sort(sort: MatSort){
    this.dataSource.sort = sort;
  }

  dataSource = new MatTableDataSource(); //<--The dataSource used in HTML
  loading: any;
  resultsLength: any;
  displayedColumns: string[] = ["id", "desde", "hasta", "tipoClienteNombre", "eliminar"];
  data: any;

  constructor(
    private crud: CustomerAccountCreditRangeService,
    public snackBar: MatSnackBar,
    public dialog: MatDialog,
    private ui: UIComponentsService
  ) {
  }

這適用於 Angular 9

Answer 8

我在 app-routing 模塊中導入了 MatTableModule 並且錯誤消失了。

Answer 9

我也被這個錯誤消息打破了很長時間，后來我發現我使用的是 [datasource] 而不是 [dataSource]。

Answer 10

我遇到過同樣的問題！ 雖然我糾正了它，但我將 MatTableModule 的導入添加到 mycustom module.ts 中，而不是添加到 app.module.ts

注意：由於我創建了一個自定義模塊（inbox.module.ts）並在其中創建了組件，因此這些模塊的聲明是在 inbox.module.ts 中創建的，因此假設 MatTableModule 的導入是在inbox.module.ts 而不是 app.module.ts

Answer 11

對於那些只使用 Angular CDK 而不是 Angular Material 的人，而不是導入MatTableModule import CdkTableModule ：

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

@NgModule({
imports: [
    ...
    CdkTableModule,
    ...
],

Answer 12

就我而言，我在 app 模塊中添加了MatTableModule ，但我有這樣的嵌套組件：

app module
|__________dashboard module
           |_________________user module
                             |___________plans module

我在用戶模塊的計划模塊的直接父級中添加了MatTableModule ，然后它就起作用了。

Answer 13

對我來說這個問題很奇怪，但我可以重現它，這意味着它可能發生在其他人身上。

我的 Angular 版本是 14。當我想使用ng add @angular/material將 Material 添加到我的項目時，它想要安裝的材料版本，並問我是7.0.0 （我錯過了但還是安裝了）。

當我查看其他項目時，它們的材料版本要高得多： 14.2.6 。

最后，為我解決問題的是為ng add命令提供特定的 angular 材料版本。 您必須檢查當前版本是什么並將其添加到命令中。 例如：

ng add @angular/material@14.2.6

Answer 14

請記住導入 MatTableModule 模塊並刪除下面顯示的表格元素以供參考。
錯誤的執行
<table mat-table [dataSource]=”myDataArray”> ... </table>
正確的實現：
<mat-table [dataSource]="myDataArray"> </mat-table>

Answer 15

問題是你的角度材料版本，我也有，當我在本地安裝好的角度材料版本時，我已經解決了這個問題。

希望它也能解決你的問題。

Answer 16

在我的 Angular 13 上，我遇到了同樣的問題，因為我忘記在我導入了 MatTableModule 的應用程序模塊中添加我的組件。

Answer 17

我已經通過在我的name.component.html [data-source]="dataSource"更改為[dataSource]="dataSource"來解決它

Answer 18

你必須將“table”標簽更改為“mat-table”。

它會解決你的問題。

Answer 19

如果您已經嘗試了這里提到的所有方法但都沒有成功，請確保您還為項目添加了角度材料。 如果沒有，只需在終端中運行以下命令來添加它：

ng add @angular/material

添加成功后，等待項目刷新，錯誤會自動消失。

Answer 20

請查看您的 dataSource 變量未從服務器獲取數據或 dataSource 未分配給預期的數據格式。