无法绑定到“dataSource"，因为它不是“table"的已知属性 [英] Can't bind to 'dataSource' since it isn't a known property of 'table'

问题描述

我是 Angular 5 开发的新手.我正在尝试使用此处提供的示例开发带有角度材料的数据表:"

请帮忙.

解决方案

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

component.html

<ng-container matColumnDef="{{column.id}}" *ngFor="let column of columnNames"><mat-h​​eader-cell *matHeaderCellDef mat-sort-header>{{column.value}}</mat-h​​eader-cell><mat-cell *matCellDef="let element">{{element[column.id]}}</mat-cell></ng-容器><mat-h​​eader-row *matHeaderRowDef="displayedColumns"></mat-h​​eader-row><mat-row *matRowDef="let row; columns:displayedColumns;"></mat-row></mat-table>

component.ts

import { Component, OnInit, ViewChild } from '@angular/core';从 '@angular/material' 导入 { MatTableDataSource, MatSort };从'@angular/cdk/table'导入{数据源}；@成分({选择器:'app-m'，templateUrl: './m.component.html',styleUrls: ['./m.component.css'],})导出类 MComponent 实现 OnInit {数据源;显示列 = [];@ViewChild(MatSort) 排序:MatSort；/*** 用户表的预定义列列表*/列名 = [{id: '位置',值:'号'，}, {id: '姓名',值:'名称'，},{id: '重量',值:'重量'，},{id: '符号',值:'符号'，}];ngOnInit() {this.displayedColumns = this.columnNames.map(x => x.id);this.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' },{ 位置:4，名称:'铍'，重量:9.0122，符号:'Be' }，{ 位置:5，名称:'硼'，重量:10.811，符号:'B' },{ 位置:6，名称:'碳'，重量:12.0107，符号:'C' }，];this.dataSource = new MatTableDataSource(tableArr);this.dataSource.sort = this.sort;}}导出接口元素{位置:数字，名称:字符串，重量:数量，符号:字符串}

app.module.ts

导入:[垫排序模块，垫表模块，],

I am new in angular 5 development. I am trying to develop a data table with angular material using the example provided here: "https://material.angular.io/components/table/examples".

I am getting an error saying Can't bind to 'dataSource' since it isn't a known property of 'table'.

Please help.

解决方案

Thanx to @Jota.Toledo, I got the solution for my table creation. Please find the working code below:

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

这篇关于无法绑定到“dataSource"，因为它不是“table"的已知属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！