如何使用 ngFor angular 迭代 object 中的數組內容

Question

我有從 api 返回的數據，格式如下：

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

我將它顯示到引導表中，但平台內容不會顯示？ 如何循環它？

<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>