大佬教程收集整理的这篇文章主要介绍了angular-material2 – Angular material 2数据表Error Uncaught Error:模板解析错误:,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
该表建立在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_scheR_249_11845@A' to the '@NgModule.scheR_249_11845@as' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_scheR_249_11845@A' to the '@NgModule.scheR_249_11845@as' 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_scheR_249_11845@A' to the '@NgModule.scheR_249_11845@as' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_scheR_249_11845@A' to the '@NgModule.scheR_249_11845@as' 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; @R_5_10586@lProducts: any = 88; @R_5_10586@lNeeds: any = 88; @R_5_10586@lBrands: any = 88; @R_5_10586@lAgeGroups: 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(R_249_11845@ath.random() * (NAMEs.length - 1))] + ' ' + NAMES[Math.round(R_249_11845@ath.random() * (NAMEs.length - 1))].charAt(0) + '.'; return { id: (this.data.length + 1).toString(),name: name,progress: Math.round(R_249_11845@ath.random() * 100).toString(),color: COLORS[Math.round(R_249_11845@ath.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() {} }
以上是大佬教程为你收集整理的angular-material2 – Angular material 2数据表Error Uncaught Error:模板解析错误:全部内容,希望文章能够帮你解决angular-material2 – Angular material 2数据表Error Uncaught Error:模板解析错误:所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。