Estoy haciendo una pequeña aplicación en Angular 4, estoy mostrando una tabla con algunos datos, quiero aumentar y disminuir el valor actual haciendo clic en la función DecreaseVal () y IncreaseVal (), pero cambia todo el valor en el ciclo.

<tr class="rem1" *ngFor="let hero of heroes">
   <td class="invert">
    <div class="quantity">
        <div class="quantity-select">
            <div class="entry minus" (click)="DecreaseVal()">&nbsp</div>
            <div class="entry value"><span>{{count}}</span></div>
            <div class="entry plus" (click)="IncreaseVal()">&nbsp;</div>
        </div>
    </div>
  </td>
</tr>

Este es mi componente

 count=1;
    DecreaseVal()
    {
    this.count=this.count>1?this.count-1:this.count;
    }
    IncreaseVal()
    {
     this.count=this.count<5?this.count+1:this.count;
    }
1
Varadha Raj 14 nov. 2017 a las 20:03

2 respuestas

La mejor respuesta

Sucede porque su variable count es global y no pertenece a la clase Hero. Necesita modificar su código de la siguiente manera:

Declarar nuevo campo en hero.class.ts

count: number = 0;

Modifica tu plantilla component.html

<tr class="rem1" *ngFor="let hero of heroes">
   <td class="invert">
    <div class="quantity">
        <div class="quantity-select">
            <div class="entry minus" (click)="DecreaseVal(hero)">&nbsp</div>
            <div class="entry value"><span>{{hero.count}}</span></div>
            <div class="entry plus" (click)="IncreaseVal(hero)">&nbsp;</div>
        </div>
    </div>
  </td>
</tr>

Y ahora en component.ts

DecreaseVal(hero: Hero)
{
    if (hero.count > 1) {
       hero.count--;
    }
}

IncreaseVal(hero: Hero)
{
    if (hero.count < 5) {
       hero.count++;
    }
}

UPD: actualizado con sugerencias y notas de Andrien Brunelat.

1
Vitalii Chmovzh 14 nov. 2017 a las 17:21

Hay dos posibles soluciones para su problema. En primer lugar, aumentará todos los valores porque es la misma variable para todos los elementos que está iterando. La primera y rápida solución es agregar ese recuento a su objeto héroe en su matriz de héroes. Algo como

heroes = [{heroName:'example', count : 0}, {heroName:'other', count : 0}];

Luego, en su evento, debe enviar el índice para que el método sepa dónde aumentar.

(click)="IncreaseVal(i)"

En su componente, entonces debe aumentar el contador de ese objeto.

IncreaseVal(index){ this.heroes[index].count++; }

La otra solución es crear un componente secundario para héroes. Tendrá el td completo y el contador val.

2
Jordy García 14 nov. 2017 a las 17:16