typescript 单击表中的行时添加或减去数量

gcuhipw9  于 2023-01-27  发布在  TypeScript
关注(0)|答案(2)|浏览(172)

我需要当我点击一个表的行我增加的金额,当我再次点击同一行我减去我已经增加的金额。我已经设法增加它,但我不知道如何使它减去金额时再次点击。
我已经成功地使选中的行根据我是否选中它而改变颜色,但是现在我需要在再次单击该行时减去所添加的内容(如果我成功了,就这样做)。
这是我的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" class="col border border-white border-4" id="other" type="button"
            routerLink="/entry-order-lines-quantity" style="background-color:rgb(3, 71, 150);">
            Cantidad {{totalCantidad}}
        </div>

这是我的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;
  }

非常感谢。

x7yiwoj4

x7yiwoj41#

当我们需要执行两个函数时,我们应该使用唯一的"事件",并用""分隔;"的功能。一些像:

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

好吧,如果总是做相同的,我们可以使用一个唯一的函数

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

并使用

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

实际上,如果你有几个元素(少于50或100),最好使用数组项来计算总数,而不是使用一个辅助变量。这是最差的性能,但更"健壮"。所以你可以使用getter

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

ne5o7dgx2#

因为你有一个文件保存每个项目的selected状态,你需要在决定执行动作之前先检查状态。你可以这样做

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

这样你就不需要再调用两个函数了.你可以删除其他函数来改变item.selected = !item.selected;的状态
别忘了在你的html点击动作中把选中的项目传递到total(item)

相关问题