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

【问题标题】：How to iterate for array content inside object with ngFor angular如何使用ngFor angular迭代对象内的数组内容
【发布时间】：2021-08-21 13:48:46
【问题描述】：

我有从 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 文件中执行此操作？

【问题讨论】：

如果你想真正循环它 - 只需执行ngFor="let platform of game.platforms"
@tymeJV 在 tr 或 td 内？

标签： arrays json angular ngfor

【解决方案1】：

您可以使用 =>

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

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

【讨论】：

【解决方案2】：

你可以这样试试。

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

【讨论】：

我已编辑您的答案以使用块格式，这对于多行代码示例更具可读性。请检查以确保格式正确。值得注意的是，我删除了星号周围的反引号，因为我认为这里不需要它们，并且是您保持正确格式的一部分。
谢谢。我会关注您的反馈。
没问题。如您所见，我编辑了您的一些帖子以提高清晰度和格式，这有望改善他们的接受度。我感谢您的贡献和参与社区的渴望；欢迎。
酷。我将成为 stackoverflow 的热心成员。 :)