Question

首先抱歉我的英语不好。我正在我的应用程序上创建一个名为“table”的组件。该组件接收由Laravel Backend提供的JSON。我正在尝试为它可以接收的所有jsons制作一个dinamic组件。我的意思是，这个组件将能够绘制一个包含json包含的字段的表。我希望如果我收到一个有“姓名，年龄，地址”或“姓名，国家，州”的json，表格就会显示出来。

是否有现成的组件为我提供此服务？因为我找到列的所有组件都必须先配置。

谢谢！

Answer 1

你绝对可以创建一个简单的组件来完成这项工作。这是一个插件，显示了一种可以开始的方式。

https://plnkr.co/edit/jZKJl9yDnXCvGCnxqlHM

组件为my-table，您传入对象数组。此特定实现期望数组的每个元素具有相同的键。

@Component({
  selector: 'my-table',
  template: `
    <table>
      <tr>
        <th *ngFor="let header of headers">
          {{ header }}
        </th>
      </tr>
      <tr *ngFor="let row of data">
        <td *ngFor="let cell of objectKeys(row)">
          {{ row[cell] }}
        </td>
      </tr>
    </table>
  `,
})
export class MyTableComponent implements OnInit {

  @Input() data: any[];
  headers: any;
  private objectKeys: any;

  constructor() {
    this.objectKeys = Object.keys;
  }

  ngOnInit() {
    this.headers = Object.keys(this.data[0]);
  }
}

你要设置数据：

this.mydata = [
  { one: "hello", two: "world", three: "foo", four: 1 },
  { one: "xxx", two: "aaa", three: "foo", four: 1 },
  { one: "yyy", two: "bbb", three: "foo", four: 1 }  
]

并使用如下组件：

<my-table [data]="mydata"></my-table>

Answer 2

请参阅AngularJS dynamic table with unknown number of columns。

此外，纯粹的代码编写请求在Stack Overflow上是偏离主题的 - 我们期望这里的问题与特定的编程问题有关 - 但我们很乐意帮助你自己写！告诉我们 what you've tried，以及你被困的地方。这也有助于我们更好地回答您的问题。

Answer 3

您可以使用Object.keys(row)获取该行的键数组。我猜你有JSON的行数组，对吗？在这种情况下，您可以在第一个row上执行此操作，然后动态构建表。

const data = [
    { field1: 'value 1', field2: 123, field3: 'adsaosd' },
    { field1: 'value 2', field2: 123, field3: 'adsaosd' },
    { field1: 'value 3', field2: 123, field3: 'adsaosd' },
    { field1: 'value 4', field2: 123, field3: 'adsaosd' },
]

const keys = Object.keys(data[0]); // TODO check whether there is at least one row

如何在Angular4中自动检测json的表头？

3 个答案: