[解決済み] dataSource' は 'table' の既知のプロパティではないので、バインドできません。
2022-08-15 19:41:21
質問
私はangular 5の開発初心者です。私はここに提供された例を使用して、angular素材でデータテーブルを開発しようとしています: " https://material.angular.io/components/table/examples "です。
というエラーが表示されます。
Can't bind to 'dataSource' since it isn't a known property of 'table'.
助けてください。
どのように解決するのですか?
Jota.Toledoさんのおかげで、テーブルを作成するための解決策を得ることができました。 以下、動作するコードをご覧ください。
コンポーネント.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>
コンポーネント.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,
],
関連
-
[解決済み] ngModel' は 'input' の既知のプロパティではないため、バインドできません。
-
[解決済み] formGroup' は 'form' の既知のプロパティではないため、バインドできません。
-
[解決済み] Angularのエラーです。"Can't bind to 'ngModel' because it isn't a known property of 'input'"."
-
[解決済み】'formControl'は'input'の既知のプロパティではないのでバインドできない - Angular2 Material Autocomplete問題
-
[解決済み】Angularの例外。ngForIn'は既知のネイティブプロパティではないため、バインドできない
-
[解決済み] Angular 2のFormGroupからすべての検証エラーを取得する
-
[解決済み] .tsファイルはTypeScriptのコンパイルの一部ですが、使用されていませんという警告を消すには?
-
[解決済み] Angular / Angular Materialでmat-horizontal-stepperのステップをプログラムで移動させることは可能ですか?
-
[解決済み] 文字列|ヌル'型の引数は、文字列'型のパラメータに代入できません。タイプ 'null' はタイプ 'string' に割り当てられません。
-
[解決済み] Karma/Jasmineのテストで「[object ErrorEvent] thrown」エラーが発生した場合、どのようにデバッグすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] コンポーネントクラスからテンプレート参照変数にアクセスする
-
[解決済み] Angular 4/5/6 グローバル変数
-
[解決済み] Angular Materialでのデフォルトのソート - ヘッダーのソート
-
[解決済み] パイプ ' ' が見つかりません。
-
[解決済み] angular-cliのパラメータ --base-href と --deploy-url の違いは何ですか?
-
[解決済み] Angularで、コントロールが作成された後、FormControlにバリデータを追加する方法は?
-
[解決済み] Angular / Angular Materialでmat-horizontal-stepperのステップをプログラムで移動させることは可能ですか?
-
[解決済み] 文字列|ヌル'型の引数は、文字列'型のパラメータに代入できません。タイプ 'null' はタイプ 'string' に割り当てられません。
-
[解決済み] AngularでFormArrayからすべての項目を削除する
-
[解決済み] Karma/Jasmineのテストで「[object ErrorEvent] thrown」エラーが発生した場合、どのようにデバッグすればよいですか?