Angular中ngFor内点击事件失效：点击无响应且无日志输出

核心问题 #

你遇到的问题根源在于模板中直接调用getLocationIds()作为ngFor的数据源，同时*ngIf条件里也重复调用该方法。Angular的变更检测机制会在每次检测周期执行这个方法，而方法每次都会返回一个新的数组对象（map操作会生成新数组）。这会导致ngFor认为数据源一直在变化，不断销毁并重建循环内的DOM元素——你点击的元素可能在触发事件前就已经被替换掉了，所以console.log和点击事件都无法正常执行。

另外，第一个<a>标签使用原生onclick虽然理论上能触发，但同样会受DOM频繁重建的影响，且不符合Angular的事件绑定规范，不建议使用。

解决方案 #

1. 缓存数据源到组件属性

不要在模板中直接调用方法生成数组，而是在组件内部将结果缓存到一个属性中，仅在数据更新时重新计算：

// 组件类中新增属性
locationIds: { locationId: string, url: string }[] = [];

ngOnInit(): void {
  // 初始化数据源，若数据是异步加载的，要在数据返回后再调用
  this.updateLocationIds();
}

// 封装更新逻辑，数据变化时调用
updateLocationIds(): void {
  const stores = this.nonRetailProperty?.nonRetailAssociatedStores || [];
  this.locationIds = stores.map(store => ({
    locationId: store.locationId,
    url: store.url
  }));
}

2. 修改模板使用缓存属性

将模板中的getLocationIds()替换为缓存的locationIds，同时用ngFor的局部变量优化*ngIf条件（避免重复计算）：

<ng-container *ngFor="let store of locationIds; let last = last">
  <a (click)="alert('clicked')" style="cursor: pointer;">Test Link</a>
  <a (click)="redirectToUrl(store.url)" class="location-link" style="cursor: pointer;">{{ store.locationId }}</a>
  <ng-container *ngIf="!last">, </ng-container>
</ng-container>

这里用last局部变量替代了原来的数组长度判断，既避免了重复调用方法，也更简洁高效。

3. 验证数据加载

确保nonRetailProperty和nonRetailAssociatedStores已经正确加载（比如如果是异步请求，要在数据返回后调用updateLocationIds()）。如果数据源为空，ngFor不会渲染任何元素，自然也不会有点击事件触发。

内容的提问来源于stack exchange，提问作者Mr. Mark Tawin