NOTA: Publicación original editada para eliminar detalles/complejidad de implementación.
Tengo un bucle ngFor que llama a un método en un servicio. El método devuelve una matriz que itera el bucle for.
El enlace de evento de clic no funciona si la matriz devuelta es una matriz de objetos. Funciona si la matriz es de un tipo primitivo.
***menú contextual/clic derecho funciona en cualquier caso, por lo que esto afecta el clic y no el menú contextual
***Haga clic en los eventos inmediatamente anteriores y posteriores a este para que funcionen como se esperaba.
*** el comportamiento es el mismo incluso si muevo el método codificado del servicio al componente
Aquí está el bucle for en contexto:
<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"); }Con esta implementación (o cualquier otra matriz de tipo de objeto), el clic no funcionará/se activará:
public getVariables(): {name: string}[] { return [{"name": "dog"},{"name": "cat"},{"name": "bird"},{"name":"bear"}]; }Con esta implementación, el clic funcionará:
public getVariables(): number[] { return [1,2,3,4,5]; }Súper simple, no funciona...
¿Alguna idea sobre cuál podría ser el problema? Estoy al final de mi cuerda con Angular en este punto.
Prueba esto:
// 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 -->Es posible que haya algún código dentro de la aplicación que esté activando la Detección de cambios, lo que provoca que se vuelva a procesar incluso antes de que se ejecute el controlador de clics asociado y, por lo tanto, el problema.
Solo con fines de prueba, antes de realizar el cambio sugerido anteriormente, también puede intentar definir una propiedad de matriz dentro de la clase de servicio y luego devolver esa matriz desde getVariables() y observar si resuelve el problema.
// DesignerService ts file someArray = [{"name": "dog"},{"name": "cat"},{"name": "bird"},{"name":"bear"}]; public getVariables(): {name: string}[] { return this.someArray; }