无法绑定到“数据源”,因为它不是“表”的已知属性


86

我是Angular 5开发的新手。我正在尝试使用此处提供的示例使用角材料开发数据表:“ https://material.angular.io/components/table/examples ”。

我说错了 Can't bind to 'dataSource' since it isn't a known property of 'table'.

在此处输入图片说明

请帮忙。


4
这不table,只是使用<mat-table #table [dataSource]...>
错误

1
尝试使用mat-table标签,然后错误消失了,但是我在视图中看不到我的表。
拉胡尔·孟贾

这是使用元素的正确方法,你必须有其他的问题在其他地方
错误

您能给我一个使用mat-table标签的工作示例吗?
拉胡尔·芒贾尔

8
您使用的选择器来自v6,并且您已经安装了v5。您应该看一下v5示例v5.material.angular.io/components/table/examples
Jota.Toledo '18年

Answers:


117

记得添加MatTableModule你的app.module's importsie

在Angular 9+

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

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

小于Angular 9

import { MatTableModule } from '@angular/material'  

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

4
这对我有用,大多数教程使用table标记而不是mat-table标记。
Phuah Yee Keat

1
当您使用分页时,这对我也有效,我想我们也必须做同样的事情
Aathil Ahamed

2
我必须努力import { MatTableModule } from '@angular/material/table'; 工作
克里斯·古纳瓦德纳

1
100%@WasiF(如果您收到无法与角形材料绑定),这主要是由于未导入模块。上面的答案得到了我100%的支持。
西奥多

41

感谢@ Jota.Toledo,我找到了创建表的解决方案。请在下面找到工作代码:

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

component.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,
],

2
使用此方法,我可以使可重用的表组件采用数据数组和columnNames数组。这是比material.angular.io中的
Janne Harju,

尝试了相同的步骤,但无济于事。
Signcodeindie

@ Signcodeindie-很抱歉这么晚回复,您遇到什么错误?
Rahul Munjal

14
  • Angular Core 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';

并将其添加到以下imports部分TestBed.configureTestingModule({})

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

测试也说明了答案。解决了Angular 7问题
。– SushiGuy

10

如果您是“从'@ angular / material'导入{MatTableModule};“ 在共享模块上,请确保将其导出。

sharedmodule.ts:

import { MatTableModule } from '@angular/material' 

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

然后在您的自定义模块上,在其中定义使用物料表的组件:

custommodule.ts:

@NgModule({
imports: [ sharedmodule ]     
})

9

对于Angular 7

检查表组件在哪里。就我而言,它的位置类似于app / shared / tablecomponent,其中共享文件夹包含所有子组件,但是我在app.module.ts的Ngmodules中导入了材料模块,这是不正确的。在这种情况下,应将Material模块导入shared.module.ts的Ngmodules中,并且可以正常工作。

无需将角度7中的“桌子”更改为“垫子桌子”。

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


4

素材示例使用了错误的表格标签。更改

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

1

我也很长时间因这个错误消息而烦恼,后来我发现我使用的是[数据源]而不是[数据源]。


谢谢你!我在以下位置使用pug转换器存在同样的问题:html-to-pug.com,它复制了[dataSource]输入并将其转换为[datasource]
Jonathan002,


-1

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


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.