Angular：使用 row/column 输入将数据绘制到 table

Question

我想将数据绘制到 table 的相应位置。我得到一个包含数据的数组，其中应该放置数据。像下面这样JSON：

{
  "Layout": {
    "fields": [
      {
        "row": 0,
        "column": 1,
        "text": "dummy text"
      },
      {
        "row": 3,
        "column": 3,
        "text": "another dummy text"
      },
      {
        "row": 4,
        "column": 1,
        "text": "another dummy text"
      }
    ]
  }
}

从这些数据中我想要生成这种table（或者也可以是div）：

+--+------------+--------------------+--+--+--------------------+
|  | dummy text |                    |  |  |                    |
+--+------------+--------------------+--+--+--------------------+
|  |            |                    |  |  | another dummy text |
+--+------------+--------------------+--+--+--------------------+
|  |            | another dummy text |  |  |                    |
+--+------------+--------------------+--+--+--------------------+

所以第 0 行将是第一行，第 1 列将是第二列，带有数据虚拟文本

如何在 angular(2 , 4) 中创建此逻辑？

Answer 1

您好，您必须遍历字段数 (tr)，然后遍历列数 (td)。您可以使用 *ngIf 填充内容。代码可能如下所示：

<table>
       <tr *ngFor="yourObject.Layout.fields;let index=i">
          <td *ngFor="arrayWithMaxColumnNumber  ;let j = index">
             <ng-container *ngIf="j===yourObject.Layout.fields[i].column"> yourObject.Layout.fields[i].text </ng-container>
          </td>
       </tr>
    </table>

在您的组件中，您需要生成一个长度为最大列数的数组...例如：[1,2,3,4,...n]（如果未知）

Angular：使用 row/column 输入将数据绘制到 table

Angular: Plotting data to table with row/column input

javascript

angular

typescript

plot

tabular