Tengo un array de objetos.
Tengo un ngfor para mostrar el atributo de cada objeto pero no se como ponerle una propiedad onclick para que cambie dinámicamente el contenido del atributo del objeto y, a su vez, la imagen de fondo.
Es decir, quiero que al hacer click en la butaca, se cambie su propiedad estado a otro número y que, a su vez, cambie la imagen.
Tengo esto en el app.component.ts:
public butacas: Array<Butaca> = [
new Butaca(0,1),
new Butaca(1,0),
new Butaca(2,0),
new Butaca(3,0),
new Butaca(4,0),
new Butaca(5,0),
...
]
Y tengo esto en el app.component.html:
<nav>
<div>
<tr *ngFor="let butaca of butacas">
<img [src]='butaca.imageUrl'>
</tr>
</div>
</nav>
Por, último aunque no se si es necesario ponerlo, adjunto la clase butaca:
export class Butaca {
butacaNegra: string = "https://i.imgur.com/b3PuXoH.png";
butacaVerde: string = "https://i.imgur.com/h2PlvBk.png";
butacaBlanca: string="https://i.imgur.com/zHkAQtG.png";
public id: number;
public estado: number=0;
public imageUrl: string;
constructor (id: number, estado: number){
this.estado=estado;
this.id = id;
if (this.estado==0){
this.imageUrl=this.butacaBlanca;
}else{
if(this.estado==1){
this.imageUrl=this.butacaVerde;
}else{
this.imageUrl=this.butacaNegra;
}
}
}
}
¿Alguien me puede ayudar?