角度：使用行/列輸入將數據繪制到表

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]（如果未知）