私はAngular5の開発に不慣れです。ここに提供されている例を使用して、角度のあるマテリアルを使用してデータテーブルを開発しようとしています:「https://material.angular.io/components/table/examples」。
エラーが発生しました Can't bind to 'dataSource' since it isn't a known property of 'table'.
助けてください。
私はAngular5の開発に不慣れです。ここに提供されている例を使用して、角度のあるマテリアルを使用してデータテーブルを開発しようとしています:「https://material.angular.io/components/table/examples」。
エラーが発生しました Can't bind to 'dataSource' since it isn't a known property of 'table'.
助けてください。
mat-table
タグを使用した実用的な例を教えてください。
回答:
MatTableModule
あなたのapp.module's imports
ieを追加することを忘れないでください
import { MatTableModule } from '@angular/material/table'
@NgModule({
imports: [
// ...
MatTableModule
// ...
]
})
import { MatTableModule } from '@angular/material'
@NgModule({
imports: [
// ...
MatTableModule
// ...
]
})
import { MatTableModule } from '@angular/material/table';
を機能させる必要がありました
@ 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,
],
実行中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 ]
})
Angular7の場合
テーブルコンポーネントがどこにあるかを確認します。私の場合、共有フォルダーにすべてのサブコンポーネントが含まれているapp / shared / tablecomponentのように配置されていましたが、app.module.tsのNgmodulesにマテリアルモジュールをインポートしていましたが、これは正しくありませんでした。この場合、Materialモジュールはshared.module.tsのNgmodulesにインポートする必要があります。
角度7で「テーブル」を「マットテーブル」に変更する必要はありません。
また、このエラーメッセージで長い間頭を悩ませていましたが、後で[dataSource]の代わりに[datasource]を使用していることがわかりました。
問題はあなたのAngularMaterialバージョンです、私は同じです、そして私がローカルにAngularMaterialの良いバージョンをインストールしたときにこれを解決しました。
それがあなたの問題も解決することを願っています。
私の場合、問題は、データソースを含むコンポーネントをメインモジュールの宣言に入れなかったことです。
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用です
MatTableModuleモジュールをインポートし、参照用に以下に示すテーブル要素を削除することを忘れないでください。
間違った実装
<table mat-table [dataSource]=”myDataArray”>
...
</table>
正しい実装:
<mat-table [dataSource]="myDataArray">
</mat-table>
dataSource varibaleがサーバーからデータを取得していないか、dataSourceが予期された形式のデータに割り当てられていないことを確認してください。
table
、ただ使用してください<mat-table #table [dataSource]...>