Угловой: вывод данных в таблицу с вводом строки / столбца - PullRequest
Новая
       14

Угловой: вывод данных в таблицу с вводом строки / столбца

0 голосов
/ 21 января 2019

Я хочу построить данные для соответствующего размещения таблицы.Я получаю массив с данными, где данные должны быть размещены.Как этот 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 будет вторым столбцом с фиктивным текстом данных

Как создать эту логику в угловых (2, 4)?

1 Ответ

0 голосов
/ 21 января 2019

Здравствуйте, вы должны выполнить итерацию по количеству ваших полей (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] (если не известно)

...