将列和数据动态加载到Angular 2中的表中

前端之家收集整理的这篇文章主要介绍了将列和数据动态加载到Angular 2中的表中前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个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]">
原文链接:https://www.f2er.com/angularjs/143403.html

猜你在找的Angularjs相关文章