Невозможно выполнить привязку к 'dataSource', поскольку это неизвестное свойство 'table'

86

Я новичок в разработке angular 5. Я пытаюсь разработать таблицу данных с угловым материалом, используя приведенный здесь пример: « https://material.angular.io/components/table/examples ».

Я получаю сообщение об ошибке Can't bind to 'dataSource' since it isn't a known property of 'table'.

введите описание изображения здесь

Пожалуйста помоги.

Рахул Мунджал
источник
4
Это не так table, просто пользуйтесь<mat-table #table [dataSource]...>
баги
1
попытался использовать тег mat-table, ошибка исчезла, но я не вижу свою таблицу в представлении.
Рахул Мунджал
Это правильный способ использования элемента, у вас должны быть другие проблемы где-то еще
ошибки
Можете ли вы предоставить мне рабочий пример с использованием mat-tableтега?
Рахул Мунджал
8
Вы используете селектор из v6, и вы установили v5. Вам следует взглянуть на примеры v5 v5.material.angular.io/components/table/examples
Jota.Toledo

Ответы:

117

Не забудьте добавить MatTableModuleв свой app.module's importsIE

В Angular 9+

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

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

Менее чем Angular 9

import { MatTableModule } from '@angular/material'  

@NgModule({
  imports: [
    // ...
    MatTableModule
    // ...
  ]
})
ВАСИФ
источник
4
Это работает для меня, в большинстве руководств используется тег table, а не тег mat-table.
Phuah Yee Keat,
1
Это работает и для меня, когда вы используете разбиение на страницы, и мы должны делать то же самое, я думаю,
Аатил Ахамед,
2
Я должен был заставить его import { MatTableModule } from '@angular/material/table'; работать,
Крис Гунавардена
1
100% @WasiF, если вы не можете связать с угловым материалом, это в основном из-за того, что модуль не импортируется. Приведенный выше ответ получил мою стопроцентную поддержку.
Теодор
41

Спасибо @ 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
Янне Харью
Пробовал те же шаги, но не помогло.
Signcodeindie
@ Signcodeindie - Извините за такой поздний ответ, какую ошибку вы получаете?
Рахул Мунджал
14
  • Угловое ядро ​​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 7.
SushiGuy
10

если ваш "import {MatTableModule} from '@ angular / material';" находится в общем модуле, убедитесь, что вы его экспортируете.

sharedmodule.ts:

import { MatTableModule } from '@angular/material' 

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

затем в пользовательском модуле, где вы определяете компонент, использующий таблицу материалов:

custommodule.ts:

@NgModule({
imports: [ sharedmodule ]     
})
The_Rub
источник
9

Для Angular 7

Проверьте, где находится ваш компонент таблицы. В моем случае он был расположен как app / shared / tablecomponent, где общая папка содержит все подкомпоненты. Но я импортировал модуль материала в Ngmodules файла app.module.ts, что было неверно. В этом случае модуль материала должен быть импортирован в Ngmodules файла shared.module.ts. И он работает.

НЕТ НЕОБХОДИМОСТИ менять 'table' на 'mat-table' в angular 7.

Angular7 - Невозможно привязать к 'dataSource', поскольку это не известное свойство 'mat-table'

Санчит
источник
4

Пример материала использует неправильные теги таблицы. + Изменить

<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>
Ицхар
источник
1

Я также долгое время ломал себе голову этим сообщением об ошибке, а позже я обнаружил, что использовал [источник данных] вместо [источник данных].

Баласубраманский S
источник
Спасибо за это! У меня была такая же проблема с конвертером мопсов онлайн с: html-to-pug.com , он скопировал ввод [dataSource] и преобразовал его в [datasource]
Jonathan002
0

Проблема в вашей версии angular материала, у меня такая же, и я решил это, когда установил хорошую версию материала angular в local.

Надеюсь, это тоже решит вашу проблему.

Андресс Нджонгуэ
источник
-1

Не забудьте импортировать модуль MatTableModule и удалить элемент таблицы, показанный ниже для справки.
неправильная реализация
<table mat-table [dataSource]=”myDataArray”> ... </table>
правильная реализация:
<mat-table [dataSource]="myDataArray"> </mat-table>

Йогеш Аггарвал
источник
-3

Пожалуйста, убедитесь, что ваш dataSource varibale не получает данные с сервера или dataSource не назначен для ожидаемого формата данных.

Омкар Джадхав
источник