Как создать таблицу Dynami c в html и angular

Question

Мне нужно представить в Html динамическую c таблицу, которую я не знаю, каков шаблон каждой строки: Иногда она содержит 2 столбца, иногда 4 ...

I нужно что-то вроде этого:

    <div>
   <h1>Angular HTML Table Example</h1>
   <table>
      <thead>
         <tr>
            <th>#ID</th>
            <th>Name</th>
            <th>Email</th>
            <th>Phone</th>
            <th>Address</th>
            <th>Action</th>
         </tr>
      </thead>
      <tbody>
         <tr *ngFor="let item of ItemsArray">
            <th>{{ item.id }}</th>
            <td>{{ item.name }}</td>
            <td>{{ item.email }}</td>
            <td>{{ item.phone}}</td>
            <td>{{ item.address }}</td>
           
         </tr>
      </tbody>
   </table>
</div

И вместо:

<tr *ngFor="let item of ItemsArray">
        <th>{{ item.id }}</th>
        <td>{{ item.name }}</td>
        <td>{{ item.email }}</td>
        <td>{{ item.phone}}</td>
        <td>{{ item.address }}</td></tr>

что-то вроде:

 <tr *ngFor="let item of ItemsArray">
<ngFor="let property of item.structure>  
            <td>{{ property }}</td>

       

Есть ли у вас какие-нибудь советы для меня?

Спасибо

Answer 1

Вы можете получить ключи элемента списка, используя приведенный ниже код и столбец заголовка рендеринга

Object.keys(list);

Это stackblitz код

Вы можете увидеть требуемый код в продукте компонентный файл. Надеюсь, у вас сработает сценарий

Answer 2

Это решение:

<tbody class="f">
             <ng-container *ngFor="let message of this.allMessages | filter:term | paginate: config  ;let i = index"> 
            <tr >
                <td>{{ i+1 }}</td>
                    <ng-container *ngFor = "let j of this.messageIndex">
                        <td>{{message.data[0][j]}}</td>
                    </ng-container>
             </tr> 
             </ng-container> 
        </tbody>