Angular - 更新过滤器上的 ngFor 索引

Question

我在模板中有一个带有 *ngFor 的列表：

<li *ngFor="let product of products | filterProducts: selectedFilter; index as productId">
    <a [routerLink]="['/product', productId]">
      {{product.name}}
    </a>
</li>

因此，我使用 filterProducts 管道来过滤具有选定选项的数组项，但是当数组更改时，它不会更新模板上的 productId，因此 routerLink 会将我带到错误的详细信息页面（它使用原始数组中的 productId） .

有什么帮助吗？ 每次过滤数组中的项目时，我都需要更新模板中的 productId。

Answer 1

似乎您正在尝试使用索引作为 productId，我认为您应该在您的 routerLink 中使用产品的某些属性，即 product.id 或 product.productId，例如另外，您也不需要索引作为 productId [您可以也删除它]

<li *ngFor="let product of products | filterProducts: selectedFilter; index as productId">
    <a [routerLink]="['/product', product.productId]">
      {{product.name}}
    </a>
</li>

Answer 2

index as productId 设置产品数组中产品项的索引。 它类似于 productId = products.indexOf(product)。 尝试在产品对象中使用 id 属性