时间戳

首页 > 解决方案 > 单击 ngFor 内的链接时没有任何反应

angular - 单击 ngFor 内的链接时没有任何反应

问题描述

此代码运行良好：

<div class="container-fluid">
  <div class="row">
    <div class="col-12">
      <div>
        <a [routerLink]="'3'" mat-raised-button>Voir la boutique</a>
      </div>
    </div>
  </div>
</div>

文本

正如我们所看到的，它会生成一个带有正确 URL 的链接按钮，如果我单击它，它会运行良好。

但是下面的代码不起作用。唯一的区别是链接之前存在一个 ngFor 循环：

<div class="container-fluid">
  <div class="row">
    <div class="col-12">
      <div *ngFor="let storeGroup of groupedStoreList">
        <a [routerLink]="'3'" mat-raised-button>Voir la boutique</a>
      </div>
    </div>
  </div>
</div>

文本

重复上一个链接按钮，这是由于 ngFor 的缘故，这是预期的，当我将其悬停时，生成的链接似乎也可以。但如果我点击它，什么也不会发生。

我使用 Bootstrap 和 Angular Material，不知道它是否相关。

标签： angular

解决方案

我可以看到这种情况发生的唯一原因是如果mousedown触发更改检测，这会导致元素重新渲染，并且不再捕获点击。对此有一些修复，它们本身就是最佳实践。

在所有组件中使用OnPush更改检测策略：

@Component({
  // ...,
  changeDetection: ChangeDetectionStrategy.OnPush
})
// ...

除此之外，对于一个ngFor过度的对象，它还建议使用该trackBy选项。这将防止不必要的 DOM 重新渲染：

<div *ngFor="let storeGroup of groupedStoreList; trackBy: trackByStoreList">

您需要在组件中声明：

trackByStoreList(index: number, storeList: StoreList): string {
  return storeList.id;
}

您需要返回对象的一些唯一标识符，如果没有，可以使用索引。你可以在这里阅读更多信息

推荐阅读