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

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>