Question

我想将数据绘制到表的各个位置。我得到一个包含数据的数组，应将数据放置在其中。像下面这样的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"
      }
    ]
  }
}

从这些数据中，我需要这种生成的表（或者也可以是div）：

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

因此，第0行将是第一行，第1列将是第二列，并带有数据伪文本

如何在angular（2，4）中创建此逻辑？

Answer 1

您好，您必须遍历字段数（tr），然后遍历列的maxNumber（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]（如果未知）

角度：使用行/列输入将数据绘制到表中

1 个答案: