Question

我正在尝试构建一个表格，该表格将对我提交给它的数据进行非常有效的操作。这意味着我将传递一个JSON对象（在将来，我现在只是传递几个数组进行测试），它将根据对象形成适当的列和行。我想要做的是获取headers数组中的元素并形成我的列并获取数据数组中的元素并形成我的行。我构建了一个ng-repeat来处理对象的循环，但是当我的图表形成时，其中没有任何东西（我将提供截图）。我的桌子不工作的任何想法？这是我app.component.ts的代码：

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `
<h1>{{ title }}</h1>

<div >
    <table border=1>
            <tr>
            <td ng-repeat="header in headers">
                <h2>{{header}}</h2>
            </td>                      
        </tr>
        <tr ng-repeat="dp of data">
            <td ng-repeat="header in headers">
                {{dp[header]}}
            </td>
        </tr>
    </table> 
</div>
  `,
  styles: [`
  table, th , td  {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 5px;
}
table tr:nth-child(odd) {
  background-color: #f1f1f1;
}
table tr:nth-child(even) {
  background-color: #ffffff;
}
  `]
})
export class AppComponent {
  title = 'TestTable';
    headers = [{column:"ID",name:"Name"}];
    data = [
            {id:1,name:"Tony"},
            {id:2,name:"Zach"},
            {id:3,name:"Scot"},
        ];    
}

这是输出：

这是我的错误，但我认为它们不是它不起作用的原因（我可能错了：

Answer 1

在角度2中，您需要使用ng-for而不是ng-repeat。只需在标题和数据之前添加它。希望它对你有用。

export class AppComponent {
 constructor(){
  this.title = 'TestTable';
    this.headers = [{column:"ID",name:"Name"}];
    this.data = [
            {id:1,name:"Tony"},
            {id:2,name:"Zach"},
            {id:3,name:"Scot"},
        ];    
  };
}

以下是工作Plunker链接。谢谢。如果您有任何其他疑问，请与我们联系。

使用动态列

1 个答案: