Я новичок в разработке angular 5. Я пытаюсь разработать таблицу данных с угловым материалом, используя приведенный здесь пример: « https://material.angular.io/components/table/examples ».
Я получаю сообщение об ошибке Can't bind to 'dataSource' since it isn't a known property of 'table'.
Пожалуйста помоги.
angular
datatable
angular-material
Рахул Мунджал
источник
источник
table
, просто пользуйтесь<mat-table #table [dataSource]...>
mat-table
тега?Ответы:
Не забудьте добавить
MatTableModule
в свойapp.module's imports
IEВ Angular 9+
Менее чем Angular 9
источник
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
источник
У меня возникла эта проблема при запуске
ng test
, поэтому, чтобы ее исправить, я добавил в свойxyz.component.spec.ts
файл:import { MatTableModule } from '@angular/material';
И добавил его в
imports
раздел вTestBed.configureTestingModule({})
:источник
если ваш "import {MatTableModule} from '@ angular / material';" находится в общем модуле, убедитесь, что вы его экспортируете.
sharedmodule.ts:
затем в пользовательском модуле, где вы определяете компонент, использующий таблицу материалов:
custommodule.ts:
источник
Для Angular 7
Проверьте, где находится ваш компонент таблицы. В моем случае он был расположен как app / shared / tablecomponent, где общая папка содержит все подкомпоненты. Но я импортировал модуль материала в Ngmodules файла app.module.ts, что было неверно. В этом случае модуль материала должен быть импортирован в Ngmodules файла shared.module.ts. И он работает.
НЕТ НЕОБХОДИМОСТИ менять 'table' на 'mat-table' в angular 7.
Angular7 - Невозможно привязать к 'dataSource', поскольку это не известное свойство 'mat-table'
источник
Пример материала использует неправильные теги таблицы. + Изменить
к
источник
Я также долгое время ломал себе голову этим сообщением об ошибке, а позже я обнаружил, что использовал [источник данных] вместо [источник данных].
источник
Проблема в вашей версии angular материала, у меня такая же, и я решил это, когда установил хорошую версию материала angular в local.
Надеюсь, это тоже решит вашу проблему.
источник
Не забудьте импортировать модуль MatTableModule и удалить элемент таблицы, показанный ниже для справки.
неправильная реализация
<table mat-table [dataSource]=”myDataArray”> ... </table>
правильная реализация:
<mat-table [dataSource]="myDataArray"> </mat-table>
источник
Пожалуйста, убедитесь, что ваш dataSource varibale не получает данные с сервера или dataSource не назначен для ожидаемого формата данных.
источник