将列和数据动态加载到Angular 2中的表中
发布时间:2020-12-17 07:52:36 所属栏目:安全 来源:网络整理
导读:我有一个html页面,我想在其中创建一个表.此表中的列是动态的,这意味着它们使用“any []”类型从服务器提取到组件中的变量.此表中的数据也是动态的,这意味着在编程时我不知道哪些列和数据将在表中绑定. 我尝试了下面的代码,但它似乎没有工作或给出任何错误.它
我有一个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]"> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |