从 Angular 中的数组数据创建 table

Question

我正在尝试创建一个带有动态列的 table。所以有 3 列一直在那里，其余的是动态生成的。例如

var newCol = ["node1","node2","node3"];

然后我需要在 table 中总共有 6 列。

table 需要看起来像：

ID     TS     Node     node1       node2      node3
1      ts1     a
2      ts2     a
3      ts3     b
4      ts4     c
5      ts5     a
6      ts6     b

我有这样的数组：

var idArray = ["1","2","3","4","5","6"];
var ts = ["ts1","ts2","ts3","ts4","ts5","ts6"];
var node = ["a","a","b","c","a","b"];

var newCol = ["node1","node2","node3"];

因此 newCol 数组背后的逻辑是需要对 newCol 数组中的每个元素进行 API 调用并显示结果。现在 api 还没有准备好，我正在尝试创建如上所示 table 的骨架。 API 会 return 以下格式的响应

编辑：

但是，我还需要 colArray，它必须在 table 中。例如

 newCol.forEach(node => {
           this.httpClient.get(this.URL1 + node).subscribe(data => {

           add the data into a array (create array of array)

          });
   });

例如：URL/newCol[0] return API 的数据看起来像：

{
  "totalReqCount": 6,
  "map": {
    "id1": {
      "api": "asd",
      "tID": "id1",
      "processedTimeDuration": "00:00:11"
    },
    "id2": {
      "api": "asdf",
      "tID": "id2",
      "processedTimeDuration": "00:00:38"
    },
    "id3": {
      "api": "asdfg",
      "tID": "id3",
      "processedTimeDuration": "00:00:59"
    },
    "id4": {
      "api": "qwe",
      "tID": "id4",
      "processedTimeDuration": "00:00:25"
    },
    "id5": {
      "api": "qwer",
      "tID": "id5",
      "processedTimeDuration": "00:00:00"
    },
    "id6": {
      "api": "qwerty",
      "tID": "id6",
      "processedTimeDuration": "00:00:02"
    },
}

问题陈述是如何将列数组中列的数据填充到 table。

这是相同的 stackblitz 示例。

https://stackblitz.com/edit/angular-hsmswb?file=app/table-basic-example.html

任何人都可以提供帮助。非常感激谢谢

Answer 1

我认为解决这个问题的最佳方法是创建一个对象数组，其中每个对象都是 table 中的一行。

array = [
    {
        id: 1,
        TS: ts1,
        Node: a,
        node1: '',
        node2: '',
        node3: '',
    }, {
        id: 2,
        TS: ts2,
        Node: B,
        node1: '',
        node2: '',
        node3: '',
    }
]

然后你可以使用 *ngFor 来循环你的 <tr></tr>

<tr *ngFor="let row of array">
<td>{{row.id}}</td>
<td>{{row.TS}}</td>
<td>{{row.Node}}</td>
<td>{{row.node1}}</td>
<td>{{row.node2}}</td>
<td>{{row.node3}}</td>
</tr>

然后，一旦您执行了 API 调用，您就可以替换 node1、node2、node3 等的值，table 将更新。

Answer 2

请检查工作示例https://stackblitz.com/edit/angular-hsmswb-kap4ph

如有任何疑问，请告诉我。

我所做的更改。

table-基本-example.ts

我把所有变量都移到了里面 class

public idArray = ["1","2","3","4","5","6"];
public ts = ["ts1","ts2","ts3","ts4","ts5","ts6"];
public node = ["a","a","b","c","a","b"];
public newCol = ["node1","node2","node3"];

已添加dataSource variable public dataSource = [];

更改行 displayedColumns: string[] = ['position', 'name', 'weight']; 值应该与我们在 <ng-container matColumnDef="position"> 中使用的值相同。

table-基本-example.html

<ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> idArray </th>
    <td mat-cell *matCellDef="let element"> {{element.id}} </td>
  </ng-container>

  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> ts </th>
    <td mat-cell *matCellDef="let element"> {{element.ts}} </td>
  </ng-container>

  <ng-container matColumnDef="weight">
    <th mat-header-cell *matHeaderCellDef> node </th>
    <td mat-cell *matCellDef="let element"> {{element.node}} </td>
  </ng-container>

Answer 3

这是执行此操作的最佳实践方法。这样，后端可以在没有前端参与的情况下创建任意数量的列：

https://stackblitz.com/edit/angular-hsmswb-qxwdsa?file=app%2Ftable-basic-example.html

简而言之，您的后端代码结构应如下所示：

yourData = [
  {
    "columns": [
      {
        "heading": "Name",
        "field": "name"
      },
      {
        "heading": "Age",
        "field": "age"
      },
      {
        "heading": "Address",
        "field": "address"
      },
      {
        "heading": "Telephone Number",
        "field": "telephoneNumber"
      }
    ],
    "data": [
      {
        "name": "Andrew",
        "age": "22",
        "address": "1 Howick Place",
        "telephoneNumber": "6546546546"
      },
      {
        "name": "Simon",
        "age": "32",
        "address": "2 Howick Place",
        "telephoneNumber": "6546546456547"
      },
      {
        "name": "Brian",
        "age": "28",
        "address": "3 Howick Place",
        "telephoneNumber": "6546546456547"
      }

    ]
  }];

请注意 columns.field 必须与数据数组中使用的键相匹配。这种方法很棒，因为您可能无法使用 mat-table，因此这将适用于传统的 tables.

从 Angular 中的数组数据创建 table

Create a table from array data in Angular

angular

mat-table