1

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?

2 respuestas 2

2

La idea es utilizar el evento click Un ejemplo de como quedaria en tu codigo seria:

app.component.html

<nav>     
  <div>
    <tr *ngFor="let butaca of butacas">
      <img [src]='butaca.imageUrl' (click)="changeButacaState(butaca)">
    </tr>
  </div>
</nav>

butaca.ts

export class Butaca {
    butacaNegra = 'https://i.imgur.com/b3PuXoH.png';
    butacaVerde = 'https://i.imgur.com/h2PlvBk.png';
    butacaBlanca = 'https://i.imgur.com/zHkAQtG.png';
    public id: number;
    public estado = 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;
        }
      }
    }

    changeState(){
        switch (this.estado) {
            case 0:
                this.estado = 1;
                this.imageUrl = this.butacaVerde;
                break;
            case 1:
                this.estado = 2;
                this.imageUrl = this.butacaNegra;
                break;
            default:
                this.estado = 0;
                this.imageUrl = this.butacaBlanca;
                break;
        }
    }

  }

app.component.ts

import { Component } from '@angular/core';
import { Butaca } from './models/butaca';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  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),
  ]

  changeButacaState(butaca: Butaca): void {
    butaca.changeState();
  }
}
3
  • Tambien pudieras utilizar directamente la funcion changeState en el html <img [src]='butaca.imageUrl' (click)="butaca.changeState()"> Commented el 18 mar. 2019 a las 10:22
  • Muchas gracias hermanos. Un placer aprender angular si hay una comunidad tan dedicada Commented el 18 mar. 2019 a las 10:58
  • No hay de que. Si te ayudo alguna respuesta marcala como la mejor para cerrar este post y otros usuarios sepan que ya tiene una solucion. Commented el 18 mar. 2019 a las 11:10
2

En Angular se usa el atributo click. Por ejemplo :

<tr *ngFor="let butaca of butacas" (click)="cambiarEstadoButaca(butaca)">
  <img [src]='butaca.imageUrl'>
</tr>

Y en el componente sólo necesitas crear ese método:

cambiarEstadoButaca(butaca: Butaca) {
   //lo que necesites hacer
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.