Question

如何使用angular2

中的动态列和行创建表格

我有来自休息服务的数据并在此可观察的

中捕获

this._physicalDataService.getPhysicalData().subscribe(res=> this.data = res)

我可以通过此代码动态显示行。如何使列和列标题动态化，即如何提取数组中的所有JSON键以将另一个循环放在最上面。

为了澄清我的后端服务可能会返回不同列和行的不同数据集，我想在页面上动态显示它们。

               <thead class="no-bd">
                        <tr>
                          <th>Id</th>
                          <th>Number</th>
                          <th >Employee Name</th>
                          <th >Manager Name</th>
                        </tr>
                        </thead>

                        <tbody>

                        <tr *ngFor="let tablerows of data">
                          <td>
                          {{tablerows.row_id}}
                          </td>
                          <td>{{tablerows.number}}</td>
                          <td >{{tablerows.employee_name}}</td>
                          <td >{{tablerows.manager_name}}
                          </td>
                        </tr>

Answer 1

您也可以在<th></th>上使用相同的* ngFor。

但是为此你需要计算Object的长度。它不会给你每个数组中的元素。

var custObject = new Object();
myArray["firstname"] = "Gareth";
myArray["lastname"] = "Simpson";
myArray["age"] = 21;
this.objLength = Object.keys(myArray).length;  // Calc length of Object i.e. 3

在您拥有对象长度之后，您可以使用下方管道多次渲染<th>块：

<th *ngFor='#key of 5 | demoNumber;let i=index'>
Column{{i}}
</th>

管：

import {Pipe, PipeTransform} from 'angular2/core';

@Pipe({name: 'demoNumber'})
export class DemoNumber implements PipeTransform {
  transform(value, args:string[]) : any {
    let res = [];
     for (let i = 0; i < value; i++) {
        res.push(i);
     }
    return res;
  }
}

这将计算没有对象字段和＆amp;然后ngFor将为每个字段呈现Coulmn +索引。

希望这有帮助。

angular2表，包含动态行和列

1 个答案: