Создайте таблицу из данных массива в Angular

проверьте рабочий пример https://stackblitz.com/edit/angular-hsmswb-kap4ph

Дайте мне знать, если у вас есть сомнения.

Изменения, которые я сделал.

таблица-основной-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">.

таблица-основной-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>

Это лучший практический способ сделать это. Таким образом, серверная часть может создать столько столбцов, сколько пожелает, без участия клиентской части:

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, поэтому он будет работать с традиционными таблицами.

Я думаю, что лучший способ решить эту проблему — создать массив объектов, где каждый объект представляет собой строку в вашей таблице.

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 и т. д., и таблица будет обновлена.