javascript - Angular 8 - klickhändelse utlöses inte inne i ngFor när man itererar över objektarrayer

OBS: Ursprungligt inlägg redigerat för att ta bort implementeringsdetaljer/komplexitet.

Jag har en ngFor-loop som anropar en metod på en tjänst. Metoden returnerar en array som loopas igenom av for-loopen.

Klickhändelsens bindning fungerar inte om den returnerade arrayen är en array av objekt. Den fungerar om arrayen är av en primitiv typ.

***contextmeny/högerklick fungerar i båda fallen, så detta påverkar klick och inte contextmeny

***klickhändelser precis före och efter detta för att fungera som förväntat

***beteendet är detsamma även om jag flyttar den hårdkodade metoden från tjänsten till komponenten

Här är for-loopen i sitt sammanhang:

<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");
}

Med denna implementering (eller någon annan objekt typ array) kommer klick inte att fungera/utlösas:

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

Med denna implementering kommer klick att fungera:

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

Superenkelt, fungerar inte...

Några idéer om vad problemet kan vara? Jag är vid vägs ände med Angular vid det här laget.

Svar #1

Prova detta:

// 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 -->

Det kan finnas någon kod inom applikationen som utlöser Change Detection, vilket orsakar omrendering redan innan den tillhörande klickhanteraren körs och därmed orsakar problemet.

Enbart för teständamål, innan du gör den ovan föreslagna ändringen kan du också försöka definiera en array-egenskap inom serviceklassen och sedan returnera den arrayen från getVariables(), och observera om det löser problemet.

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

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

Relaterade artiklar