Angular7 - 无法绑定到“dataSource",因为它不是“mat-table"的已知属性 [英] Angular7 - Can't bind to 'dataSource' since it isn't a known property of 'mat-table'
问题描述
我使用的是 Angular 7.0.2,在尝试使用 角材料
I am using Angular 7.0.2, and I am facing this error while trying to create a table using Angular Material
无法绑定到dataSource",因为它不是mat-table"的已知属性
Can't bind to 'dataSource' since it isn't a known property of 'mat-table'
app-routing.module.ts
app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatTableModule } from '@angular/material';
import { HomeComponent } from './home/home.component';
import { ProductionOrderComponent } from './production-order/production-order.component';
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'production-order', component: ProductionOrderComponent },
];
@NgModule({
imports: [
RouterModule.forRoot(routes),
HttpClientModule,
BrowserAnimationsModule,
MatTableModule,
],
exports: [RouterModule]
})
export class AppRoutingModule { }
html
<mat-table [dataSource]="productionOrder" class="mat-elevation-z8">
<ng-container matColumnDef="t_pdno">
<th mat-header-cell *matHeaderCellDef>Production Order</th>
<td mat-cell *matCellDef="let productionOrder">{{ productionOrder.t_pdno }}</td>
</ng-container>
<ng-container matColumnDef="t_mitm">
<th mat-header-cell *matHeaderCellDef>Item</th>
<td mat-cell *matCellDef="let productionOrder">{{ productionOrder.t_mitm }}</td>
</ng-container>
<mat-header-row *matHeaderRowDef="['t_pdno', 't_mitm']"></mat-header-row>
<mat-row *matRowDef="let row; columns: ['t_pdno', 't_mitm'];"></mat-row>
</mat-table>
组件
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-production-order',
templateUrl: './production-order.component.html',
styleUrls: ['./production-order.component.scss']
})
export class ProductionOrderComponent implements OnInit {
public productionOrder
constructor(private http: HttpClient) { }
ngOnInit() {
this.getData()
}
getData() {
this.http.get('http://localhost:3000/api/production-order').subscribe(res => {
console.log(res['data'])
this.productionOrder = res['data']
})
}
}
我尝试了什么:
使用
代替
import { MatTableModule } from '@angular/material';
在组件中和这些链接:
无法绑定到'dataSource' 因为它不是 'table' 的已知属性
有人知道如何解决这个问题吗?
Anyone got an idea how to solve this?
推荐答案
您应该在
AppModule
或声明组件的模块中导入MatTableModule
.You should import
MatTableModule
inAppModule
or in the Module where you component is declared.@NgModule({ imports: [ MatTableModule ... ] }) public class AppModule
或
@NgModule({ imports: [ MatTableModule ... ], declarations : [ProductionOrderComponent] }) public class MyModule
这篇关于Angular7 - 无法绑定到“dataSource",因为它不是“mat-table"的已知属性的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文登录 关闭
扫码关注1秒登录发送“验证码”获取 | 15天全站免登陆