Question

我花了两天的时间找到所有可能的解决方案（见下文），并将Angular和Material从7升级到8，仍然是同样的抱怨。

无法绑定到“ dataSource”，因为它不是“表”的已知属性

import和@NgModule （也尝试部分，所有可能的组合`）
将<table换成<mat-table
[dataSource]不是[datasource]

app.module.ts

import { MatFormFieldModule, MatInputModule} from '@angular/material';
import { MatTableModule } from '@angular/material/table';  // or just @angular/material
@NgModule({
  imports:
  [
    MatTableModule // adding MatTableDataSource here will get Error at component.ts: Unexpected value 'MatTableDataSource' imported by the module 'AppModule'. Please add a @NgModule annotation
  ]})

component.ts

import {MatTableModule, MatTableDataSource} from '@angular/material/table';
@NgModule({
    imports: [MatTableModule, MatTableDataSource]
  })

component.html

<table mat-table [dataSource]="myArray">
        <tr mat-row *matRowDef="let row"></tr>
</table>

package.json，还尝试了v8.0.1的内容：

"dependencies": {
    "@angular/animations": "^8.0.0",
    "@angular/cdk": "^8.0.1",
    "@angular/common": "^8.0.0",
    "@angular/compiler": "^8.0.0",
    "@angular/core": "^8.0.0",
    "@angular/flex-layout": "^8.0.0-beta.16",
    "@angular/forms": "^8.0.0",
    "@angular/http": "^7.2.8",
    "@angular/material": "^8.1.2",
    "@angular/platform-browser": "^8.0.0",
    "@angular/platform-browser-dynamic": "^8.0.0",
    "@angular/router": "^8.0.0",
    "core-js": "^2.5.4",
    "rxjs": "~6.3.3",
    "rxjs-compat": "~6.3.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"
  },

尝试了所有这些： Angular7 - Can't bind to 'dataSource' since it isn't a known property of 'mat-table'

ERROR: Can't bind to 'dataSource' since it isn't a known property of 'mat-tree'

Material Design Table is not accepting dataSource object

mat-table can't bind dataSource

https://github.com/angular/components/issues/11906

https://www.devexpress.com/Support/Center/Question/Details/T730641/the-can-t-bind-to-datasource-since-it-isn-t-a-known-property-of-dx-data-grid-error-occurs

https://www.oipapio.com/question-941474

https://code-examples.net/en/q/2fe6baa

Answer 1

花点时间弄清楚，由于该结构 app\module\component ，“组件”位于“模块”中，因此无论app.module.ts中的内容是否正确不在正确的容器中。将必要的import和@NgModule({ imports: [] })添加到 module.ts 后，即可使用！

仍然“无法绑定到'dataSource'，因为它不是'table'的已知属性。”

1 个答案: