Không thể liên kết với 'dataSource' vì nó không phải là thuộc tính đã biết của 'table'

Tôi là người mới trong phát triển góc 5. Tôi đang cố gắng phát triển một bảng dữ liệu với vật liệu góc cạnh bằng cách sử dụng ví dụ được cung cấp tại đây: " https://material.angular.io/components/table/examples ".

Tôi gặp lỗi khi nói Can't bind to 'dataSource' since it isn't a known property of 'table'.

Xin vui lòng giúp đỡ.

Hãy nhớ thêm MatTableModulevào app.module's importstức là của bạn

Trong Angular 9+

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

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

Ít hơn Angular 9

import { MatTableModule } from '@angular/material'  

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

Thanx với @ Jota.Toledo, tôi đã có giải pháp cho việc tạo bảng của mình. Vui lòng tìm mã làm việc bên dưới:

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

• Angular Core v6.0.2,
• Vật liệu góc, v6.0.2,
• Angular CLI v6.0.0 (toàn cầu v6.1.2)

Tôi gặp sự cố này khi chạy ng test, vì vậy để khắc phục, tôi đã thêm vào xyz.component.spec.tstệp của mình :

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

Và thêm nó vào importsphần trong TestBed.configureTestingModule({}):

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

nếu bạn "nhập {MatTableModule} từ '@ angle / material';" nằm trên một mô-đun được chia sẻ, hãy đảm bảo bạn xuất nó.

sharedmodule.ts:

import { MatTableModule } from '@angular/material' 

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

sau đó trên mô-đun tùy chỉnh của bạn, nơi bạn xác định thành phần sử dụng bảng material:

custommodule.ts:

@NgModule({
imports: [ sharedmodule ]     
})

Đối với Angular 7

Kiểm tra thành phần bảng của bạn nằm ở đâu. Trong trường hợp của tôi, nó được đặt giống như app / shared / tablecomponent nơi thư mục chia sẻ chứa tất cả các thành phần con Nhưng tôi đang nhập mô-đun material trong Ngmodules của app.module.ts, điều này không chính xác. Trong trường hợp này, mô-đun Material nên được nhập trong Ngmodules của shared.module.ts Và nó hoạt động.

KHÔNG CẦN thay đổi 'table' thành 'mat-table' ở góc 7.

Angular7 - Không thể liên kết với 'dataSource' vì nó không phải thuộc tính đã biết của 'mat-table'

Ví dụ về material đang sử dụng các thẻ bảng sai. Thay đổi

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

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

đến

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

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

Tôi cũng đã suy sụp trong một thời gian dài với thông báo lỗi này và sau đó tôi xác định rằng tôi đang sử dụng [datasource] thay vì [dataSource].

Vấn đề là phiên bản vật liệu góc cạnh của bạn, tôi cũng có như vậy, và tôi đã giải quyết vấn đề này khi tôi đã cài đặt phiên bản vật liệu góc cạnh tốt trong địa phương.

Hy vọng nó cũng giải quyết được của bạn.

Hãy nhớ nhập mô-đun MatTableModule và xóa phần tử bảng hiển thị bên dưới để tham khảo.
triển khai sai thực hiện
<table mat-table [dataSource]=”myDataArray”> ... </table>
đúng:
<mat-table [dataSource]="myDataArray"> </mat-table>

Vui lòng xem biến thể DataSource của bạn không nhận được dữ liệu từ máy chủ hoặc dataSource không được gán cho định dạng dữ liệu mong đợi.