我有一个html页面,我想在其中创建一个表.此表中的列是动态的,这意味着它们使用“any []”类型从服务器提取到组件中的变量.此表中的数据也是动态的,这意味着在编程时我不知道哪些列和数据将在表中绑定.
我尝试了下面的代码,但它似乎没有工作或给出任何错误.它只是在“tbody”中创建空“td”.
Expense.component.html
<div class="panel panel-default" style="margin-top:10px;"> <div class="panel-heading"> Expenses </div> <div class="panel-body" style="position:relative"> <div class="table-responsive"> <table class="table"> <thead> <tr> <th *ngFor="#column of columns"> {{column}} </th> </tr> </thead> <tbody> <tr *ngFor="#data of data"> <td *ngFor="#column of columns"> {{data.column}} </td> </tr> </tbody> </table> </div> </div>
在上面的代码中,列已成功创建,但数据和列混搭不起作用.我相信在Angular 2中必须有一种方法来实现这一目标.
Expense.component.ts
export class ExpenseComponent implements OnInit { errorMessage: any[]; columns: string[]; data: any[]; constructor(private _commonService: CommonService,private _expenseService: ExpenseService) { } ngOnInit(): void { this._commonService.getColumnNames('condomanagement','expenses') .subscribe(data => this.promise(data),error => this.errorMessage = <any>error); } private promise(data: string[]) { this.columns = data; this._expenseService.getExpenses('condomanagement',this.columns) .subscribe(data => this.anotherPromise(data),error => this.errorMessage = <any>error); } private anotherPromise(data: any[]) { this.data = data; console.log(this.columns); console.log(this.data); } private handleError(error: Response) { console.error(error); return Observable.throw(error.json().error || 'Server error'); } }
数据在上面的代码中登录到控制台,但根据我的试用版不能在html中工作.请问有什么想法吗?
更新:刚刚使用这样的插值,它工作
{{MYDATA [柱]}}
而不是使用
<tr *ngFor="#data of data">
你应该用
<tr *ngFor="#data of data" *ngModel="data[column]">