Angular7 Recorrer array de objetos con contador

Question

Hola necesito recorrer un array de objetos y ponerle un contador para saber cuantas butacas hay con estado=1.

tengo la clase butacas en un componente y en el componente principal (app.component.ts) tengo esto: (el primer numero es el id y el segundo el estado. En app.component.html tengo un *ngFor para cambiar el estado con un click)

public butacas: Array<Butaca> = [

new Butaca(0,0),
  new Butaca(1,0),
  new Butaca(2,0),
  new Butaca(3,0),
   ...
]

Me gustaría saber donde poner el contador para que salga directamente en la página al clicar en alguna butaca, es decir, si tengo que hacerlo desde app.component.ts o si desde app.component.html se puede hacer directamente con un *ngFor o algo. ¿Alguien sabe?

Añado las propiedades de la clase butaca:

public id: number;
public estado: number;
public imageUrl: string;

Víctor Hugo Tirado · Answer

Cualquier tipo de Array (con el contenido que quieras...) podrá ser recorrido con un .forEach().

Este forEach va recorrer cada elemento de tu array con lo que podrás valorar despues el estado de cada uno de esos elementos.

Si el elemento tiene el estado 1 (if(elemento.estado === 1)
entonces que incremente un contador(cont ++)

Te dejo este código que hace precisamente eso:

contador(){
    let cont = 0;// iniciamos el contador en 0
    butacas.forEach( elemento => {// recorremos cada elemento del array
      if(elemento.estado === 1) // si el estado es igual a 1 que el contador incremente
          cont++;
    });  
    return cont; // retornamos el valor de contador(cuantas butacas tienen estado 1)
}

Para argumentar:

Cada vez que cambien de estados uno o mas butacas a la vez se va ejecutar esta función de manera automática y va realizar el calculo. Como la función devuelve un resultado solo basta llamarlo para obtener el valor de las butacas. Esta función también puede ser llamada desde tu html de esta forma:

ya que al llamarlo solo obtendrás un valor que se podrá renderizar, pero código de la función que este dentro de tu archivo .ts.

LuisAlava · Answer

Hola estimando lo primero que debes hacer es crea una variable dentro de la clase en app.component.ts cont = 0; y haces uso de esa variable en app.component.html de esta forma {{cont}}, supongo que al hacer clic llama a una función que hace el cambio del estado, a esa función debes adicionarle una condición, si estado cambia a 1 el contador aumenta cont++ y así mismo si el estado cambia a 0 el contador disminuirá cont--

Answered by LuisAlava on December 14, 2021

Angular7 Recorrer array de objetos con contador

2 Answers

Add your own answers!

Ask a Question