'table'の既知のプロパティではないため、 'dataSource'にバインドできません


88

私はAngular5の開発に不慣れです。ここに提供されている例を使用して、角度のあるマテリアルを使用してデータテーブルを開発しようとしています:「https://material.angular.io/components/table/examples」。

エラーが発生しました Can't bind to 'dataSource' since it isn't a known property of 'table'.

ここに画像の説明を入力してください

助けてください。


5
それはそうではありませんtable、ただ使用してください<mat-table #table [dataSource]...>
バグ

1
mat-tableタグを使用しようとすると、エラーは消えますが、ビューにテーブルが表示されません。
Rahul Munjal 2018年

これが要素の正しい使用方法です。他の場所で他の問題が発生している必要があります
バグ

mat-tableタグを使用した実用的な例を教えてください。
Rahul Munjal 2018年

8
使用しているセレクターはv6のものであり、v5がインストールされています。v5の例v5.material.angular.io/components/table/examples– Jota.Toledo 2018
ご覧ください。

回答:


123

MatTableModuleあなたのapp.module's importsieを追加することを忘れないでください

Angular9 +で

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

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

Angular9未満

import { MatTableModule } from '@angular/material'  

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

4
これは私にとってはうまくいきます。ほとんどのチュートリアルでは、mat-tableタグではなくtableタグを使用しています。
Phuah Yee Keat 2018

1
これは私にも
有効

2
私はそれimport { MatTableModule } from '@angular/material/table'; を機能させる必要がありました
ChrisGunawardena20年

1
100%@ WasiF角度のあるマテリアルでバインドできない場合は、主にモジュールがインポートされていないことが原因です。上記の答えは私の100%のサポートを得ています。
セオドア

42

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

2
これを使用して、データ配列とcolumnNames配列を受け取る再利用可能なテーブルコンポーネントを作成できます。これは、material.angular.ioの
Janne Harju 2018年

同じ手順を試しましたが、役に立ちません。
Signcodeindie

@ Signcodeindie-返信が遅くなってすみません、どのようなエラーが発生しますか?
RahulMunjal19年

14
  • 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();
}));

テストはここでも答えをスペックします。Angular 7で解決。
SushiGuy19年

10

「import {MatTableModule} from '@ angular / material';」の場合 が共有モジュール上にある場合は、必ずエクスポートしてください。

sharedmodule.ts:

import { MatTableModule } from '@angular/material' 

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

次に、材料テーブルを使用するコンポーネントを定義するカスタムモジュールで:

custommodule.ts:

@NgModule({
imports: [ sharedmodule ]     
})

9

Angular7の場合

テーブルコンポーネントがどこにあるかを確認します。私の場合、共有フォルダーにすべてのサブコンポーネントが含まれているapp / shared / tablecomponentのように配置されていましたが、app.module.tsのNgmodulesにマテリアルモジュールをインポートしていましたが、これは正しくありませんでした。この場合、Materialモジュールはshared.module.tsのNgmodulesにインポートする必要があります。

角度7で「テーブル」を「マットテーブル」に変更する必要はありません。

Angular7-「mat-table」の既知のプロパティではないため、「dataSource」にバインドできません


5

重要な例は、間違ったテーブルタグを使用しています。変化する

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

2

また、このエラーメッセージで長い間頭を悩ませていましたが、後で[dataSource]の代わりに[datasource]を使用していることがわかりました。


これをありがとう!html-to-pug.comからオンラインでパグコンバーターで同じ問題が発生しました。[dataSource]入力をコピーして[datasource]に
Jonathan0

0

問題はあなたのAngularMaterialバージョンです、私は同じです、そして私がローカルにAngularMaterialの良いバージョンをインストールしたときにこれを解決しました。

それがあなたの問題も解決することを願っています。


0

私の場合、問題は、データソースを含むコンポーネントをメインモジュールの宣言に入れなかったことです。

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
  ) {
  }

これはAngular9用です


-1

MatTableModuleモジュールをインポートし、参照用に以下に示すテーブル要素を削除することを忘れないでください。
間違った実装
<table mat-table [dataSource]=”myDataArray”> ... </table>
正しい実装:
<mat-table [dataSource]="myDataArray"> </mat-table>


-1

ここに記載されているすべてを試してもうまくいかなかった場合は、プロジェクトに角度のあるマテリアルも追加したことを確認してください。そうでない場合は、ターミナルで次のコマンドを実行して追加します。

ng add @angular/material

プロジェクトが正常に追加されたら、プロジェクトが更新されるのを待ちます。そうすれば、エラーは自動的に消えます。


-3

dataSource varibaleがサーバーからデータを取得していないか、dataSourceが予期された形式のデータに割り当てられていないことを確認してください。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.