如何使用 ngFor angular 迭代对象内的数组内容

Question

我有从 api 返回的数据，格式如下：

[
  {
    "game": "Among Us",
    "playTime": 5000,
    "genre": "Multiplayer",
    "platforms": [
      "PC",
      "Android"
    ]
  }
]

我正在将其显示到 bootstrap table，但平台内容不会显示！如何循环？

<table class="table table-striped">
        <thead>
            <tr>
                <th scope="col">Game</th>
                <th scope="col" sortable="name">Genre</th>
                <th scope="col" sortable="area">Plateforms</th>
                <th scope="col" sortable="population">Total play time</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let game of topGamesUsers">
                <td>

                    {{ game.game }}
                </td>
                <td>{{ game.genre }}</td>
                <td>{{ game.plateforms }}</td>
                <td>{{ game.users }}</td>

            </tr>
        </tbody>
    </table>

我应该将它们存储到另一个变量中还是我可以在 html 文件中执行此操作？

Answer 1

您可以使用 =>

在行中将其显示为逗号分隔的字符串

 <td>{{ game.platforms.join() }}</td>

Answer 2

你可以这样试试

<td>
    <div *ngFor="let platform of game.platforms"></div>
</td>

如何使用 ngFor angular 迭代对象内的数组内容

How to iterate for array content inside object with ngFor angular

arrays

json

angular

ngfor