Question

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

我收到错误Can't bind to 'dataSource' since it isn't a known property of 'table'.

请帮忙。

Answer 1

请记住在您的MatTableModule中添加app.module's imports，即

import { MatTableModule } from '@angular/material'  

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

Answer 2

Thanx到@ 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: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    AppRoutingModule,
    MatCardModule,
    MatProgressSpinnerModule,
    MatMenuModule,
    MatIconModule,
    MatToolbarModule,
    MatButtonModule,
    MatFormFieldModule,
    MatInputModule,
    MatSelectModule,
    MatSortModule,
    MatTableModule
  ],

Answer 3

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的{{1}}部分：

TestBed.configureTestingModule({})

Answer 4

对于Angular 7

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

不需要将角度为7的“桌子”更改为“垫子桌子”。

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

Answer 5

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

sharedmodule.ts：

import { MatTableModule } from '@angular/material' 

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

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

custommodule.ts：

@NgModule({
imports: [ sharedmodule ]     
})

Answer 6

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

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

问题是您的角材版本，我也一样，当我在本地安装好角材版本时，我已经解决了这个问题。

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

Answer 8

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

Answer 9

您必须将“ table”标签更改为“ mat-table”。

它将解决您的问题。

Answer 10

在我的情况下，麻烦在于我没有将包含数据源的组件放在主模块的声明中。

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 11

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

Answer 12

如果您已经尝试了这里提到的所有内容，但没有奏效，请确保您还向项目添加了角材料。如果没有，只需在终端中运行以下命令进行添加：

ng add @angular/material

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

Answer 13

请注意您的dataSource varibale没有从服务器获取数据，或者dataSource未分配给预期的数据格式。

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

13 个答案: