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

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

저는 앵귤러 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 imports를 들어 예를 들어.

각도 9+에서

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

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

각도 9보다 작음

import { MatTableModule } from '@angular/material'  

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

감사합니다. @Jota.톨레도, 저는 제 테이블을 만들기 위한 해결책을 얻었습니다.아래의 작동 코드를 확인하십시오.

구성요소.구성요소

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

구성 요소.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.s.ts.

imports: [
  MatSortModule,
  MatTableModule,
],

• 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/material'에서 {MatTableModule} 가져오기"가 공유 모듈에 있는 경우 이를 내보내야 합니다.

shared module.ts:

import { MatTableModule } from '@angular/material' 

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

재료 테이블을 사용하는 구성 요소를 정의하는 사용자 정의 모듈에서 다음 작업을 수행합니다.

사용자 지정 module.ts:

@NgModule({
imports: [ sharedmodule ]     
})

재료 예제는 잘못된 테이블 태그를 사용하는 것입니다.바꾸다

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

Angular 7의 경우

테이블 구성요소가 어디에 있는지 확인합니다.제 경우에는 공유 폴더에 모든 하위 구성 요소가 포함되어 있는 app/shared/table 구성 요소처럼 위치했지만 app.module.ts의 Ngmodules에서 재료 모듈을 가져오다가 잘못된 것입니다.이 경우 재료 모듈은 shared.module.ts의 Ngmodules로 가져와야 하며 작동합니다.

각도 7에서 'table'을 'mat-table'로 변경할 필요가 없습니다.

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

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

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

  ],

이 구성 요소에는 dataSource:

내보내기 클래스CustomerAccountCreditRangeList구성 요소Init{에서 구현

  @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을 가져왔는데 오류가 사라졌습니다.

저도 이 오류 메시지로 오랫동안 머리가 아팠고 나중에 제가 [dataSource] 대신 [dataSource]를 사용하고 있다는 것을 알게 되었습니다.

저도 같은 문제가 있었어요!수정했지만 app.module.ts에 추가하는 대신 matTableModule을 mycustom module.ts에 추가했습니다.

참고: 사용자 지정 모듈(inbox.module.ts)을 만들고 구성 요소를 만들었기 때문에 이러한 모듈의 선언은 inbox.module.ts에 생성되었습니다. 이로 인해 MatTableModule 가져오기는 app.module이 아닌 inbox.module.ts에 수행되어야 했습니다.

제 경우, 저는 다음과 같이 덧붙이고 있었습니다.MatTableModule앱 모듈에는 다음과 같은 중첩된 구성 요소가 있습니다.

app module
|__________dashboard module
           |_________________user module
                             |___________plans module

추가했습니다.MatTableModule사용자 모듈인 계획 모듈의 직접 상위에서 작동했습니다.

가져오기 대신 Angular Material이 아닌 Angular CDK만 사용하는 사용자용MatTableModule수입품CdkTableModule:

import { CdkTableModule } from '@angular/cdk/table';

@NgModule({
imports: [
    ...
    CdkTableModule,
    ...
],

앵글 13에서 매트테이블 모듈을 가져온 앱 모듈에 구성 요소를 추가하는 것을 잊어버려서 동일한 문제가 발생했습니다.

저에게 그 문제는 매우 이상했지만, 다른 사람들에게도 일어날 수 있다는 것을 의미합니다.

저의 Angular 버전은 14였습니다.프로젝트에 재료를 추가하고 싶었을 때ng add @angular/material설치하려는 재료 버전이 7.0.0(어쨌든 놓쳐서 설치함)이었습니다.

다른 프로젝트를 살펴보니, 그들의 재료 버전이 14.2.6으로 훨씬 더 높았습니다.

결국 제가 이 문제를 해결한 것은 특정 각진 재료 버전을 제공하는 것이었습니다.ng add지휘권현재 버전이 무엇인지 확인하고 명령에 추가해야 합니다.예:

ng add @angular/material@14.2.6

MatTableModule 모듈을 가져와 아래 표 요소를 제거하여 참조하십시오.
잘못된 시행
<table mat-table [dataSource]=”myDataArray”> ... </table>
올바른 구현:
<mat-table [dataSource]="myDataArray"> </mat-table>

문제는 당신의 각진 재료 버전입니다, 저도 같은 것을 가지고 있고, 좋은 각진 재료 버전을 로컬에 설치했을 때 이 문제를 해결했습니다.

당신 것도 해결되길 바랍니다.

나는 그것을 변경해서 해결했습니다.[data-source]="dataSource"로.[dataSource]="dataSource"내 안에서name.component.html

저는 각 기능에 대해 별도의 모듈을 가지고 있으며 app.module에 MatTableModule이 포함된 기능 모듈을 추가하여 수정하였습니다.

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

ng add @angular/material

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

dataSource 변수가 서버에서 데이터를 가져오지 않거나 dataSource가 필요한 데이터 형식에 할당되지 않았습니다.

언급URL : https://stackoverflow.com/questions/50228138/cant-bind-to-datasource-since-it-isnt-a-known-property-of-table