Angular 8 - 遍历对象数组时，点击事件不会在 ngFor 内部触发

Question

注意：编辑原始 post 以删除实施 details/complexity。

我有一个调用服务方法的 ngFor 循环。方法 returns 一个由 for 循环迭代的数组。

如果返回的数组是对象数组，则点击事件绑定不起作用。如果数组是原始类型，它确实有效。

***contextmenu/right-click 在任何一种情况下都有效，所以这会影响点击而不是上下文菜单

***在此之前和之后的点击事件按预期工作

***即使我将硬编码方法从服务移动到组件，行为也是一样的

这是上下文中的 for 循环：

<div><span (click)="addVariable()"></span></div> <!-- works -->

<div *ngFor="let variable of designerService.getVariables();" (click)="onLeftClick()" (contextmenu)="onRightClick()">just a simple div</div> <!-- doesnt work -->

<div><span (click)="addVariable()"></span></div> <!-- works -->

public addVariable() {
  alert("add variable");
}

public onLeftClick() {
  alert("left click");
}

public onRightClick() {
  alert("right click");
}

使用此实现（或任何其他对象类型数组）将不会单击 work/fire:

public getVariables(): {name: string}[] {
  return [{"name": "dog"},{"name": "cat"},{"name": "bird"},{"name":"bear"}];
}

通过此实现，点击将起作用：

public getVariables(): number[] {
  return [1,2,3,4,5];
}

超级简单，行不通...

对可能出现的问题有什么想法吗？ Angular 此时我已无计可施了。

Answer 1

试试这个：

// YourComponent ts file
variables: {name: string}[];

constructor(public designerService: DesignerService) { }

ngOnInit() {
  this.variables = this.designerService.getVariables();
}

// Other methods

<!-- HTML template file -->
<!-- Replace the designerService.getVariables() method call with component property 'variables' -->
<div *ngFor="let variable of variables" (click)="onLeftClick()" 
(contextmenu)="onRightClick()">works</div> <!-- works -->

应用程序中可能有一些代码触发了更改检测，这导致 re-rendering 甚至在关联的点击处理程序执行之前就出现了问题。

仅出于测试目的，在进行上述建议的更改之前，您还可以尝试在服务 class 中定义数组属性，然后 return 来自 [=13] 的数组=]，观察是否解决问题。

// DesignerService ts file
someArray = [{"name": "dog"},{"name": "cat"},{"name": "bird"},{"name":"bear"}];

public getVariables(): {name: string}[] {
  return this.someArray;
}

Angular 8 - 遍历对象数组时，点击事件不会在 ngFor 内部触发

Angular 8 - click event not firing inside ngFor when iterating over object arrays

javascript

click

typescript

angular