I need that when I click on the row of a table I add the amount and that when I click on that same row again I subtract the amount that I had added. I have managed to add it but I don't know how to make it subtract the amount when clicking again.

I have managed to make the selected row change color depending on whether I select it or not, but now I need what has been added (this if I have succeeded) to be subtracted if I click on the row again.

This is my html:

            <tbody>
                <tr *ngFor="let item of articulos; index as i" (click)="total(item.cantidad)"
                    (click)="cambiarFlag(item)" 
                    [ngClass]="{'seleccionada': item.selected, 'noSeleccionada': !item.selected}">
                    <td>{{item.articulo}}</td>
                    <td>{{item.cantidad}}</td>
                    <td>{{item.recogida}}</td>
                </tr>
                <br>
            </tbody>

        <div type="button"  id="other" type="button"
            routerLink="/entry-order-lines-quantity" style="background-color:rgb(3, 71, 150);">
            Cantidad {{totalCantidad}}
        </div>

This is my ts:

export class EntryOrderLinesComponent implements OnInit {
  totalCantidad: number = 0;

  articulos = [
    {
      articulo: '385/65X22.5 HANKOOK AH51 160K (3003836)',
      cantidad: 94,
      recogida: '0',
      selected: false,
    },
    {
      articulo: '385/65X22.5 HANKOOK TH31 164K (3003309)',
      cantidad: 60,
      recogida: '0',
      selected: false,
    },
  ];

  total(cantidad: number) {
    this.totalCantidad  = cantidad;
  }

  cambiarFlag(item: any) {
    item.selected = !item.selected;
  }

Thank you very much.

CodePudding user response：

When we need execute two functions we should use an unique "event" and separate by ";" the functions. Some like:

 <tr *ngFor="let item of articulos; index as i" 
    (click)="total(item.cantidad);cambiarFlag(item)">

Well, if always make the same, we can use an unique function

 <tr *ngFor="let item of articulos; index as i" 
    (click)="selectAndCalculateTotal(item)">

And use

selectAndCalculateTotal(item:any)
{
    item.selected=!item.selected;
    this.totalCantidad =(item.selected)?-item.cantidad:item.cantidad;
}

Really, if you have a few elements (less than 50 or 100) it's better calculate the total using the array item instead use an auxiliar variable. It's worst perfomance but more "robust". So you can use a getter

get total()
{
   return this.items.reduce((a:number,b:any)=>{
     return b.selected?a b.cantidad:a
   },0))
}

CodePudding user response：

since you have a filed holding the selected state of each item, you need to first check the state before deciding the action to perform. you can do that like this

  
   total(item: any) {
     if (item.selected) {
       this.totalCantidad  = cantidad;
       item.selected = !item.selected;
     }else {
       this.totalCantidad -= cantidad;
       item.selected = !item.selected;
     }
    
  }

this way you don't need to call two functions anymore. you can delete the other function to changing the state of item.selected = !item.selected;

don't forget to pass the selected item into total(item) in your html click action