带有嵌套数组的角表，“名称”显示在左列ngFor中

问题描述

我创建了表格

 <table class="table">
  <thead>
    <tr>
      <th></th>
      <th>
        Player 1
      </th>
         <th>
        Player 2
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="background-color:gray" colspan="100%">Avengers </td>
    </tr>
    <tr>
      <td>General</td>
      <td>Captain America</td>
      <td>Iron Man</td>
    </tr>
     <tr>
      <td>Soldier</td>
      <td>Hulk</td>
      <td>Spiderman</td>
    </tr>
    <tr>
      <td style="background-color:gray" colspan="100%">Justice League </td>
    </tr>
      <tr>
      <td>General</td>
      <td>Batman</td>
      <td>Superman</td>
    </tr>
     <tr>
      <td>Soldier</td>
      <td>Flash</td>
      <td>Wonder Woman</td>
    </tr>
  </tbody>
</table>

但是我希望该表基于JSON数据并由* ngFor显示。 我也希望所有数据都不是硬编码的（例如，“士兵”应该是关键，以便我可以从json级别更改它）。

所以我创建了json：

data = [
    {
      name: "Player 1",avengers: [
        {
          key: "general",value: "Captain America"
        },{
          key: "soldier",value: "Hulk"
        },],justiceLeague: [
        {
          key: "general",value: "Batman"
        },value: "Flash"
        }
      ]
    },{
      name: "Player 2",value: "Iron Man"
        },value: "Spiderman"
        },value: "Superman"
        },value: "Wonder Woman"
        }
      ]
    }
  ]

我的堆叠闪电战：https://stackblitz.com/edit/angular-bootstrap-4-starter-mo7etg?file=src%2Fapp%2Fapp.component.ts

如何使用* ngFor在表中显示数据？谢谢您提前回答！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）