angular-material2 – Angular material 2数据表Error Uncaught
发布时间:2020-12-17 17:03:15 所属栏目:安全 来源:网络整理
导读:md-table提供了Material Design样式的数据表,可用于显示数据行. 该表建立在CDK数据表的基础之上,并为其数据源输入和模板使用类似的接口,除了它的元素选择器将以md-而不是cdk-为前缀. 我有这个错误未捕获错误:模板解析错误: 这是我的products.component.htm
md-table提供了Material Design样式的数据表,可用于显示数据行.
该表建立在CDK数据表的基础之上,并为其数据源输入和模板使用类似的接口,除了它的元素选择器将以md-而不是cdk-为前缀. 我有这个错误未捕获错误:模板解析错误: 这是我的products.component.html <md-card class="chart-container"> <div class="example-container mat-elevation-z8"> <md-table #table [dataSource]="dataSource"> <!--- Note that these columns can be defined in any order. The actual rendered columns are set as a property on the row definition" --> <!-- ID Column --> <ng-container cdkColumnDef="userId"> <md-header-cell *cdkHeaderCellDef> ID </md-header-cell> <md-cell *cdkCellDef="let row"> {{row.id}} </md-cell> </ng-container> <!-- Progress Column --> <ng-container cdkColumnDef="progress"> <md-header-cell *cdkHeaderCellDef> Progress </md-header-cell> <md-cell *cdkCellDef="let row"> {{row.progress}}% </md-cell> </ng-container> <!-- Name Column --> <ng-container cdkColumnDef="userName"> <md-header-cell *cdkHeaderCellDef> Name </md-header-cell> <md-cell *cdkCellDef="let row"> {{row.name}} </md-cell> </ng-container> <!-- Color Column --> <ng-container cdkColumnDef="color"> <md-header-cell *cdkHeaderCellDef>Color</md-header-cell> <md-cell *cdkCellDef="let row" [style.color]="row.color"> {{row.color}} </md-cell> </ng-container> <md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row> <----- Heare is the problem <md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row> <----- Heare is the problem </md-table> </div> </md-card> Uncaught Error: Template parse errors: Can't bind to 'cdkHeaderRowDef' since it isn't a known property of 'md-header-row'. 1. If 'md-header-row' is an Angular component and it has 'cdkHeaderRowDef' input,then verify that it is part of this module. 2. If 'md-header-row' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" </ng-container> <md-header-row [ERROR ->]*cdkHeaderRowDef="displayedColumns"></md-header-row> <md-row *cdkRowDef="let row; col"): ng:///AppModule/AdminProductsComponent.html@60:31 Property binding cdkHeaderRowDef not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". (" </ng-container> [ERROR ->]<md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row> <md-row *cdkRowDe"): ng:///AppModule/AdminProductsComponent.html@60:16 Can't bind to 'cdkRowDefColumns' since it isn't a known property of 'md-row'. 1. If 'md-row' is an Angular component and it has 'cdkRowDefColumns' input,then verify that it is part of this module. 2. If 'md-row' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" <md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row> <md-row [ERROR ->]*cdkRowDef="let row; columns: displayedColumns;"></md-row> </md-table> </di"): ng:///AppModule/AdminProductsComponent.html@61:24 Property binding cdkRowDefColumns not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". (" <md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row> [ERROR ->]<md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row> </md-table> "): ng:///AppModule/AdminProductsComponent.html@61:16 at syntaxError (http://localhost:4200/vendor.bundle.js:86242:34) at TemplateParser.parse (http://localhost:4200/vendor.bundle.js:97363:19) at JitCompiler._compileTemplate (http://localhost:4200/vendor.bundle.js:111515:39) at http://localhost:4200/vendor.bundle.js:111435:62 at Set.forEach (native) at JitCompiler._compileComponents (http://localhost:4200/vendor.bundle.js:111435:19) at http://localhost:4200/vendor.bundle.js:111322:19 at Object.then (http://localhost:4200/vendor.bundle.js:86231:148) at JitCompiler._compileModuleAndComponents (http://localhost:4200/vendor.bundle.js:111321:26) at JitCompiler.compileModuleAsync (http://localhost:4200/vendor.bundle.js:111250:37) 这是products.componetn.ts import { Component,OnInit } from '@angular/core'; import {DataSource} from '@angular/cdk'; import {BehaviorSubject} from 'rxjs/BehaviorSubject'; import {Observable} from 'rxjs/Observable'; import 'rxjs/add/operator/startWith'; import 'rxjs/add/observable/merge'; import 'rxjs/add/operator/map'; @Component({ selector: 'app-admin-products',templateUrl: './admin-products.component.html',styleUrls: ['./admin-products.component.css'] }) export class AdminProductsComponent implements OnInit { curentPage: string; isDarkTheme: any; totalProducts: any = 88; totalNeeds: any = 88; totalBrands: any = 88; totalAgeGroups: any = 88; constructor() { this.curentPage = 'Products'; this.isDarkTheme = false; } ngOnInit() { } } /** Constants used to fill up our data base. */ const COLORS = ['maroon','red','orange','yellow','olive','green','purple','fuchsia','lime','teal','aqua','blue','navy','black','gray']; const NAMES = ['Maia','Asher','Olivia','Atticus','Amelia','Jack','Charlotte','Theodore','Isla','Oliver','Isabella','Jasper','Cora','Levi','Violet','Arthur','Mia','Thomas','Elizabeth']; export interface UserData { id: string; name: string; progress: string; color: string; } /** An example database that the data source uses to retrieve data for the table. */ export class ExampleDatabase { /** Stream that emits whenever the data has been modified. */ dataChange: BehaviorSubject<UserData[]> = new BehaviorSubject<UserData[]>([]); get data(): UserData[] { return this.dataChange.value; } constructor() { // Fill up the database with 100 users. for (let i = 0; i < 100; i++) { this.addUser(); } } /** Adds a new user to the database. */ addUser() { const copiedData = this.data.slice(); copiedData.push(this.createNewUser()); this.dataChange.next(copiedData); } /** Builds and returns a new User. */ private createNewUser() { const name = NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' + NAMES[Math.round(Math.random() * (NAMES.length - 1))].charAt(0) + '.'; return { id: (this.data.length + 1).toString(),name: name,progress: Math.round(Math.random() * 100).toString(),color: COLORS[Math.round(Math.random() * (COLORS.length - 1))] }; } } /** * Data source to provide what data should be rendered in the table. Note that the data source * can retrieve its data in any way. In this case,the data source is provided a reference * to a common data base,ExampleDatabase. It is not the data source's responsibility to manage * the underlying data. Instead,it only needs to take the data and send the table exactly what * should be rendered. */ export class ExampleDataSource extends DataSource<any> { constructor(private _exampleDatabase: ExampleDatabase) { super(); } /** Connect function called by the table to retrieve one stream containing the data to render. */ connect(): Observable<UserData[]> { return this._exampleDatabase.dataChange; } disconnect() {} } 解决方法
在app.module.ts文件中导入CdkTableModule
import { CdkTableModule } from '@angular/cdk'; 并将CdkTableModule添加到导入 imports: [ BrowserModule,BrowserAnimationsModule,FormsModule,HttpModule,CdkTableModule,MaterialModule ] (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |