Вложенная таблица с неизвестным количеством элементов

Question

Я хотел бы создать таблицу с примерами данных, но мой объект может иметь более одной темы и более одной публикации внутри темы.

[  
   {  
      "topicName":"First topic",
      "postInformations":[  
         {  
            "postName":"First post",
            "postNumbers":{  
               "number1":111,
               "number2":222,
               "number3":333
            }
         }
      ],
      "topicNumbers":{  
         "number1":123,
         "number2":456,
         "number3":789
      }
   }
]

И вот что я пытаюсь достичь:

|[topicName | postName ]|[number1]|[number2]|[number3]|
| First topic           |     111 |     222 |     333 |
|    First post         |     444 |     555 |     666 |

Обычно я бы делал это легко в html, устанавливая столбцы один за другим, но я не знаю, сколько у темы сообщений и сколько там тем.

Любая идея, как заставить это работать с неизвестным количеством сообщений и тем?

Answer 1

Вы можете использовать вложенный ngFor.Нечто подобное.

<ul *ngFor="let item of topic>
  <li>{{item.topicName}}
  <ul *ngFor="let info of item.postInformations">
    <li> {{info.postName}}</li>
    <ul *ngFor="let number of info.postNumbers">
      <li>{{number.number1}}</li>
      <li>{{number.number2}}</li>
      <li>{{number.number3}}</li>
    </ul>
  </ul>
</ul>