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

记住添加 MatTableModule 在您的 app.module's imports i、 e。

角度为9+

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

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

角度小于9

import { MatTableModule } from '@angular/material'  

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

Thanx至@Jota。托莱多,我得到了创建表的解决方案。 请在下面查找工作代码:

组成部分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
}

应用程序。单元ts

imports: [
  MatSortModule,
  MatTableModule,
],

• 角形铁芯v6。0.2,
• 角度材质,v6。0.2,
• Angular CLI v6。0.0(全球版本6.1.2)

我跑步时遇到了这个问题 ng test ,所以为了修复它,我添加了 xyz.component.spec.ts 文件:

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

并将其添加到 imports 中的节 TestBed.configureTestingModule({}) :

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

如果“从“@角度/材质”导入{MatTableModule};”位于共享模块上,请确保将其导出。

共享模块。ts:

import { MatTableModule } from '@angular/material' 

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

然后在自定义模块上定义使用材质表的构件:

自定义模块。ts:

@NgModule({
imports: [ sharedmodule ]     
})

材质示例使用了错误的表标记。 改变

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

对于角度7

检查表组件的位置。 在我的例子中,它的位置类似于app/shared/tablecomponent 其中共享文件夹包含所有子组件 但我在应用程序的Ngmodules中导入了材料模块。单元ts不正确。 在这种情况下,材料模块应导入到共享的Ngmodules中。单元ts 这是可行的。

在angular 7中,无需将“table”更改为“mat table”。

Angular7 - Can't bind to 'dataSource' since it isn't a known property of 'mat-table'

在我的例子中,问题是我没有将包含数据源的组件放在主模块的声明中。

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的

我在应用程序路由模块中导入了MatTableModule,错误消失了。

很长一段时间以来,我都被这个错误消息弄得头晕目眩,后来我发现我使用的是[数据源]而不是[数据源]。

我也有同样的问题! 虽然我纠正了它,但我将MatTableModule的导入添加到了mycustom模块中。ts,而不是将其添加到应用程序中。单元ts

注意:由于我创建了一个自定义模块(inbox.module.ts)并在其中创建了组件,因此这些模块的声明是在inbox中创建的。单元ts,因此MatTableModule的导入应该在收件箱中完成。单元ts和非应用程序中。单元ts

对于那些只使用角度CDK而不使用角度材质,而不是导入 MatTableModule 进口 CdkTableModule :

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

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

请记住导入MatTableModule模块并删除 table element 如下所示,以供参考。
错误的实现
<table mat-table [dataSource]=”myDataArray”> ... </table>
正确实施:
<mat-table [dataSource]="myDataArray"> </mat-table>

问题是你的角材料版本,我有相同的,我已经解决了这个问题,当我在本地安装了好版本的角材料。

希望它也能解决你的问题。

如果您尝试了这里提到的所有方法,但都没有成功,请确保您还向项目中添加了角度材质。如果没有,只需在终端中运行以下命令即可添加:

ng add @angular/material

成功添加后,等待项目刷新,错误将自动消失。

请查看您的数据源varibale未从服务器获取数据,或者数据源未指定为预期的数据格式。