我可以在 html 中使用 *ngFor 两次吗？答案

【问题标题】：can I use *ngFor twice in html?我可以在 html 中使用 *ngFor 两次吗？
【发布时间】：2019-06-18 09:49:31
【问题描述】：

我正在获取一些数据并将其显示在带有*ngFor 的表中但是我还有一个数组，我需要循环并在同一个表中显示它，但我不能为此再次使用*ngFor新数组，因为它们也会相互循环。

<tbody *ngFor="let update of updates">
  <tr *ngFor="let product of products">
    <td>{{ product.id }}</td>
    <td>{{ product.name }}</td>
    <td>{{ product.currentPrice }}</td>
    <td> {{ update }} </td>
  </tr>
</tbody>

我试过了，但没有用。我也试过*ngFor="let product of products, let update of updates"，但也没用。

一些额外信息：更新是时间戳的转换版本。我正在获取的 JSON 具有毫秒时间戳，因此我将其转换为正常日期并尝试将其显示回表格中。

这是我的 JSON：https://api.myjson.com/bins/1ao4vx

还有更新数组：

update=["17-6-2019 18:25:49", "17-6-2019 18:26:23", "17-6-2019 18:26:43", "17-6-2019 18:27:05", "17-6-2019 18:27:24"]

【问题讨论】：

您能否发布一些示例数据以及生成的表格应该是什么样子？我真的不清楚“在同一个表中显示两个数组”是什么意思。只是let updateOrProduct of updates.concat(products)?
一些 JSON 样本或您的数据结构看起来如何有助于我们为您提供帮助。此外，如果 updates 和 products 是变量，最好看看它们是如何分配的
我添加了我的 JSON 和更新数组。它们都应该显示在同一张表中，但我就是不知道该怎么做。
@Jojo 我假设 products.length === updates.length

标签： javascript html angular typescript

【解决方案1】：

我认为您不需要双 for 循环。从您的图表中假设产品和更新具有相同的长度...

<ng-container *ngFor="let update of updates; let i = index"> 
    <tbody>
            <tr>
                 <td>{{ products[i].id }}</td>
                 <td>{{ products[i].name }}</td>
                 <td>{{ products[i].currentPrice }}</td>
                 <td> {{ update }} </td>
            </tr>
    </tbody>
</ng-container>

【讨论】：