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

Question

I have a list with an *ngFor in the template:

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

So I use the filterProducts pipe to filter array items with selected options, but when the array changes it doesn't update the productId on the template, so the routerLink takes me to the wrong details page (it uses the productId in the original array).

Any help with this? I'd need to update the productId in the template everytime I filter items in the array.

Answer 1

It seems like you are trying to use index as a productId, I think you should use some property of product ie product.id or product.productId in your routerLink, eg Also, you don't need index as productId as well [ you can remove that as well]

<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 set index of product item in product array. It's similar to productId = products.indexOf(product). Try to use id property in product object