'table'의 알려진 속성이 아니므로 'dataSource'에 바인딩 할 수 없습니다.

저는 Angular 5 개발이 처음입니다. 여기에 제공된 예제 " https://material.angular.io/components/table/examples "를 사용하여 각도 재질로 데이터 테이블을 개발하려고합니다 .

다음과 같은 오류가 발생합니다. Can't bind to 'dataSource' since it isn't a known property of 'table'.

도와주세요.

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
    // ...
  ]
})

고맙습니다 @ 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,
],

• Angular Core v6.0.2,
• Angular Material, 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();
}));

"import {MatTableModule} from '@ angular / material';" 공유 모듈에있는 경우 내 보내야합니다.

sharedmodule.ts :

import { MatTableModule } from '@angular/material' 

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

그런 다음 재료 테이블을 사용하는 구성 요소를 정의하는 사용자 정의 모듈에서 :

custommodule.ts :

@NgModule({
imports: [ sharedmodule ]     
})

Angular 7의 경우

테이블 구성 요소가 어디에 있는지 확인하십시오. 제 경우에는 공유 폴더에 모든 하위 구성 요소가 포함 된 app / shared / tablecomponent 같은 위치에 있었지만 잘못된 app.module.ts의 Ngmodules에서 재질 모듈을 가져 왔습니다. 이 경우에는 shared.module.ts의 Ngmodules에서 Material 모듈을 가져와야합니다.

각도 7에서 '테이블'을 '매트 테이블'로 변경할 필요가 없습니다.

Angular7- 'mat-table'의 알려진 속성이 아니므로 'dataSource'에 바인딩 할 수 없습니다.

머티리얼 예제는 잘못된 테이블 태그를 사용하고 있습니다. 변화

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

나는 또한이 오류 메시지로 오랫동안 머리를 부수고 있었고 나중에 [dataSource] 대신 [datasource]를 사용하고 있음을 확인했습니다.

문제는 당신의 앵귤러 머티리얼 버전이고, 나는 똑같고, 로컬에 앵귤러 머티리얼의 좋은 버전을 설치했을 때이 문제를 해결했습니다.

당신도 해결되기를 바랍니다.

제 경우 문제는 메인 모듈의 선언에 데이터 소스를 포함하는 구성 요소를 넣지 않았다는 것입니다.

NgModule({
  imports: [
    EnterpriseConfigurationsRoutingModule,
    SharedModule
  ],
  declarations: [
    LegalCompanyTypeAssignComponent,
    LegalCompanyTypeAssignItemComponent,
    ProductsOfferedListComponent,
    ProductsOfferedItemComponent,
    CustomerCashWithdrawalRangeListComponent,
    CustomerCashWithdrawalRangeItemComponent,
    CustomerInitialAmountRangeListComponent,
    CustomerInitialAmountRangeItemComponent,
    CustomerAgeRangeListComponent,
    CustomerAgeRangeItemComponent,
    CustomerAccountCreditRangeListComponent, //<--This component contains the dataSource
    CustomerAccountCreditRangeItemComponent,
  

  ],

구성 요소에는 dataSource가 포함됩니다.

내보내기 클래스 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 모듈을 가져오고 참조를 위해 아래 표시된 테이블 요소를 제거해야 합니다 .
잘못된 구현
<table mat-table [dataSource]=”myDataArray”> ... </table>
올바른 구현 :
<mat-table [dataSource]="myDataArray"> </mat-table>

여기에 언급 된 모든 것을 시도했지만 작동하지 않았다면 프로젝트에 각도 재질도 추가했는지 확인하십시오. 그렇지 않은 경우 터미널에서 다음 명령을 실행하여 추가하십시오.

ng add @angular/material

성공적으로 추가 된 후 프로젝트가 새로 고쳐질 때까지 기다리면 오류가 자동으로 사라집니다.

dataSource varibale이 서버에서 데이터를 가져 오지 못하거나 dataSource가 예상 데이터 형식에 할당되지 않았 음을 확인하십시오.