Angular 共价数据表错误:无法读取属性';名称';未定义的
我最近开始使用共价数据表的原子组件,因为我必须显示一个带有操作按钮的自定义列。现在我正试图绑定/显示我的数据,但出现了一些问题。我得到以下错误: ng:///AppModule/CashierMaintenanceComponent.ngfactory.js:45错误类型错误:无法读取未定义的属性“name” 我不知道这是什么原因。。。知道这里发生了什么/怎么解决吗Angular 共价数据表错误:无法读取属性';名称';未定义的,angular,teradata-covalent,Angular,Teradata Covalent,我最近开始使用共价数据表的原子组件,因为我必须显示一个带有操作按钮的自定义列。现在我正试图绑定/显示我的数据,但出现了一些问题。我得到以下错误: ng:///AppModule/CashierMaintenanceComponent.ngfactory.js:45错误类型错误:无法读取未定义的属性“name” 我不知道这是什么原因。。。知道这里发生了什么/怎么解决吗 my html code: <br /><br /><br /> <div class
my html code:
<br /><br /><br />
<div class="noOverflow" fxLayout fxLayoutAlign="center start" fxLayoutWrap>
<div fxFlex="100%">
<div fxLayout fxLayoutAlign="start start">
<div fxFlex="50%">
<h1>Cashier Maintenance</h1>
</div>
<div fxFlex="40%" fxFlexOffset="60%">
<button color="primary" mat-raised-button><mat-icon class="fa fa-plus"></mat-icon> New</button>
<button mat-raised-button><mat-icon class="fa fa-edit"></mat-icon> Edit</button>
<button mat-raised-button><mat-icon class="fa fa-trash"></mat-icon> Delete</button>
</div>
</div>
<div fxLayout fxLayoutAlign="center start">
<div fxFlex="100%">
<mat-form-field floatPlaceholder="never">
<input matInput #filterTbl placeholder="filter">
</mat-form-field>
</div>
</div>
<div fxLayout class="noOverflow" fxLayoutAlign="center start">
<div fxFlex="80%" fxFlexOffset="10%">
<div class="mat-elevation-z8 noOverflow">
<table *ngIf="filteredEmployees.length > 0" td-data-table>
<thead>
<tr td-data-table-column-row>
<th td-data-table-column [sortable]="true" [sortOrder]="ASC" *ngFor="let column of columns">
{{column.label}}
</th>
</tr>
</thead>
<tbody>
<tr td-data-table-row *ngFor="let row of filteredEmployees">
<td td-data-table-cell="let column of columns">
{{row[column.name]}}
</td>
</tr>
</tbody>
</table>
<td-paging-bar #pagingBar [pageSize]="pageSize" [total]="filteredTotal" (change)="page($event)">
<span>Rows per page:</span>
<mat-select class="noOverflow" [style.width.px]="50" [(ngModel)]="pageSize">
<mat-option *ngFor="let size of [10, 20, 50,100,200,500]" [value]="size">
{{size}}
</mat-option>
</mat-select>
<span class="noOverflow">{{pagingBar.range}} of {{pagingBar.total}}</span>
</td-paging-bar>
</div>
</div>
</div>
</div>
</div>
my ts/component code:
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import { TdDataTableService, TdDataTableSortingOrder, ITdDataTableSortChangeEvent, ITdDataTableColumn } from '@covalent/core';
import { IPageChangeEvent } from '@covalent/core';
import { RestService } from '../../services/rest.service';
import { IEmployee } from '../../interfaces/employee.interface';
import { StringToDatePipe } from '../../pipes/string-to-date.pipe';
@Component({
selector: 'app-cashier-maintenance',
templateUrl: './cashier-maintenance.component.html',
styleUrls: ['./cashier-maintenance.component.css']
})
export class CashierMaintenanceComponent implements OnInit {
@ViewChild('filterTbl') filterTbl: ElementRef;
employees: IEmployee[];
filteredEmployees: IEmployee[] = [];
filteredTotal: number = 100;
columns: ITdDataTableColumn[] = [
{ name: 'EMP_ID', label: 'ID', sortable: true, width: 100 },
{ name: 'EMP_NM', label: 'Name', sortable: true, width: 200 },
{ name: 'EMP_TYP', label: 'Type', sortable: true, width: 200 },
{ name: 'TEL', label: 'Telephone', sortable: true, width: 200 },
{ name: 'ADDR', label: 'Address', sortable: true, width: 200 },
{ name: 'DT_STRT', label: 'Start Date', sortable: false, width: 200 }
];
searchTerm: string = '';
sortBy: string = 'EMP_NM';
fromRow: number = 1;
currentPage: number = 1;
pageSize: number = 10;
sortOrder: TdDataTableSortingOrder = TdDataTableSortingOrder.Ascending;
constructor(private _dataTableService: TdDataTableService, private restService: RestService) { }
sort(sortEvent: ITdDataTableSortChangeEvent): void {
this.sortBy = sortEvent.name;
console.log(sortEvent.name);
this.filter();
}
search(searchTerm: string): void {
this.searchTerm = searchTerm;
this.filter();
}
page(pagingEvent: IPageChangeEvent): void {
this.fromRow = pagingEvent.fromRow;
this.currentPage = pagingEvent.page;
this.pageSize = pagingEvent.pageSize;
this.filter();
}
filter(): void {
let newData: IEmployee[] = this.employees;
let excludedColumns: string[] = this.columns
.filter((column: ITdDataTableColumn) => {
return ((column.filter === undefined && column.hidden === true) ||
(column.filter !== undefined && column.filter === false));
}).map((column: ITdDataTableColumn) => {
return column.name;
});
newData = this._dataTableService.filterData(newData, this.searchTerm, true, excludedColumns);
this.filteredTotal = newData.length;
newData = this._dataTableService.sortData(newData, this.sortBy, this.sortOrder);
newData = this._dataTableService.pageData(newData, this.fromRow, this.currentPage * this.pageSize);
this.filteredEmployees = newData;
}
getEmployees() {
this.restService.getEmployees()
.subscribe(
(res) => {
console.log(res);
this.employees = res;
this.employees.forEach((emp: IEmployee) => {
emp.DT_STRT = new StringToDatePipe().transform(emp.DT_STRT);
});
this.filter();
}, (err) => {
console.log(err);
});
}
ngOnInit() {
Observable.fromEvent(this.filterTbl.nativeElement, 'keyup')
.debounceTime(150)
.distinctUntilChanged()
.subscribe(() => {
this.searchTerm = this.filterTbl.nativeElement.value;
this.filter();
});
this.getEmployees();
}
}
我的html代码:
出纳维护
新的
编辑
删除
{{column.label}}
{{row[column.name]}
每页行数:
{{size}}
{{pagingBar.range}}{{pagingBar.total}}的{{pagingBar.range}}
我的ts/部件代码:
从“@angular/core”导入{Component,OnInit,ViewChild,ElementRef};
从“rxjs/Observable”导入{Observable};
导入'rxjs/add/operator/debounceTime';
导入'rxjs/add/operator/distinctUntilChanged';
从“@covalent/core”导入{TdDataTableService,TdDataTableSortingOrder,ITdDataTableSortChangeEvent,ITdDataTableColumn};
从“@covalent/core”导入{IPageChangeEvent};
从“../../services/rest.service”导入{RestService};
从“../../interfaces/employee.interface”导入{IEEmployee};
从“../../pipes/string to date.pipe”导入{StringToDatePipe};
@组成部分({
选择器:“应用程序出纳维护”,
templateUrl:“./cashier maintenance.component.html”,
样式URL:['./cashier maintenance.component.css']
})
导出类出纳维护组件在NIT上实现{
@ViewChild('filterTbl')filterTbl:ElementRef;
员工:i员工[];
筛选员工:员工[]=[];
过滤器总数:数量=100;
列:ITdDataTableColumn[]=[
{name:'EMP_ID',label:'ID',sortable:true,width:100},
{name:'EMP_NM',label:'name',sortable:true,width:200},
{name:'EMP_TYP',label:'Type',sortable:true,width:200},
{name:'TEL',label:'Telephone',可排序:true,宽度:200},
{name:'ADDR',label:'Address',sortable:true,width:200},
{name:'DT_STRT',label:'Start Date',sortable:false,width:200}
];
searchTerm:string='';
sortBy:string='EMP_NM';
fromRow:number=1;
当前页面:编号=1;
页面大小:数字=10;
排序器:TdDataTableSortingOrder=TdDataTableSortingOrder.升序;
构造函数(private _dataTableService:TdDataTableService,private restService:restService){}
排序(sortEvent:ITdDataTableSortChangeEvent):无效{
this.sortBy=sortEvent.name;
控制台日志(sortEvent.name);
这个.filter();
}
搜索(搜索词:字符串):无效{
this.searchTerm=searchTerm;
这个.filter();
}
页面(分页事件:IPageChangeEvent):无效{
this.fromRow=pagingEvent.fromRow;
this.currentPage=pagingEvent.page;
this.pageSize=pagingEvent.pageSize;
这个.filter();
}
filter():void{
让newData:ieemployee[]=this.employees;
让excludedColumns:string[]=this.columns
.filter((列:ITdDataTableColumn)=>{
返回((column.filter==undefined&&column.hidden==true)||
(column.filter!==未定义&&column.filter===false));
}).map((列:ITdDataTableColumn)=>{
返回column.name;
});
newData=this.\u dataTableService.filterData(newData,this.searchTerm,true,excludedColumns);
this.filteredTotal=newData.length;
newData=this.\u dataTableService.sortData(newData,this.sortBy,this.sortOrder);
newData=this.\u dataTableService.pageData(newData,this.fromRow,this.currentPage*this.pageSize);
this.filteredEmployees=新数据;
}
getEmployees(){
this.restService.getEmployees()
.订阅(
(res)=>{
控制台日志(res);
这是1.employees=res;
this.employees.forEach((emp:ieemployee)=>{
emp.DT_STRT=新StringToDatePipe().transform(emp.DT_STRT);
});
这个.filter();
},(错误)=>{
控制台日志(err);
});
}
恩戈尼尼特(){
可观察的.fromEvent(this.filterTbl.nativeElement,'keyup')
.debounceTime(150)
.distinctUntilChanged()
.订阅(()=>{
this.searchTerm=this.filterTbl.nativeElement.value;
这个.filter();
});
这个.getEmployees();
}
}
您的td数据表行中有一个输入错误。您应该使用*ngFor
。有关工作代码,请参阅
{{row[column.name]}
对于简单的用例,使用不带原子组件的数据表可以帮助避免更复杂的模板代码。只需将数据和配置作为输入传递到
{{row[column.name]}
column是一个对象吗?@Rahul Singh不是我明确定义的对象,但是如果您查看他们的文档,第一个示例使用的是。。。
<tr td-data-table-row *ngFor="let row of filteredEmployees">
<td td-data-table-cell *ngFor="let column of columns">
{{row[column.name]}}
</td>
</tr>
<td-data-table
#dataTable
[data]="filteredData"
[columns]="columns"
[sortable]="true"
sortOrder="ASC"
[style.height.px]="200">
</td-data-table>