Question

我正在尝试创建带有动态列的表。因此，有3列始终存在，其余部分是动态生成的。例如

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

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

该表应如下所示：

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尚未准备好，我正在尝试创建如上表所示的框架。 API将以以下格式返回响应

编辑：

但是，我还需要必须在表中的colArray。例如

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

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

          });
   });

例如：URL / newCol [0]将返回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"
    },
}

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

这是相同的堆叠闪电战示例。

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

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

Answer 1

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

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

我所做的更改。

table-basic-example.ts

我将所有变量移到了类内

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-basic-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 2

这是最佳做法。这样，后端可以根据需要创建尽可能多的列，而无需前端参与：

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，因此它将与传统表一起使用。

Answer 3

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

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等的值，并且该表将更新。

从Angular中的数组数据创建表

3 个答案: