如何设置复选框单击时函数调用的条件

Question

我有一个 table，它由名为 NoBill 和 Bill 的列组成，其中有复选框作为值。

Table 默认视图

当 NoBill 复选框被点击一次时 totale(this.totale) 值得到计算。

在 nobill 列中单击两个复选框后顶部的总价值

当 Bill 列复选框被点击一次时 total(this.total)价值得到计算。它还会打开两个名为 Ratio 和 Revasst.

的新列

顶部的总价值和比率计算在这里

Ratio 的计算公式是 (total/totale)。例如，如果 total 为 110，如果 totale 为 100，则比率为 110/100=1.1。

因此，当我重复单击相同的 Bill 列复选框时（启用和禁用 2 次）值 total(this.total) 被重复计算。所以现在 total 值从 110 更新为 120。因此，Ratio 值更改为 1.2，现在改为 120/100 110/100。这是我面临的问题。我只想在单击复选框时只计算一次 total 值。因此，即使点击了多次，该复选框的点击次数仍为 110。

重复单击相同的复选框值后比率值发生变化

My stackblitz link

Answer 1

我认为你有几个变量，这很难检查。

假设你有一个像

这样的函数

  calculateTotals()
  {
    const items=this.listes.filter(x=>x.nobillChecked || x.billChecked)
    const total=items.length?items.map(x=>x.qty*x.value).reduce((totals, data) => totals + data):0

    const items2=this.listes.find(x=>x.billChecked)?this.listes.filter(x=>x.nobillChecked):[]
    const totale=items2.length?items2.map(x=>x.qty*x.value).reduce((totals, data) => totals + data):0
    const factor=totale && total?total/totale:0
    return [total,totale,factor]
  }

看到这个函数只依赖于“listes”的值，不改变任何值

你可以在你的 .html 中使用一些像

            <tr *ngFor="let list of listes; index as i">
                <td>{{list.name}}</td>
                <td>{{list.qty}}</td>
                <td>{{list.value}}</td>
                <ng-container *ngIf="factor">
                    <td>
                        <div *ngIf="list.nobillChecked;">{{ factor|number:'1.0-2' }}</div>
                    </td>
                    <td>
                        <div *ngIf="list.nobillChecked;">{{list.value*factor|number:'1.0-2' }}</div>
                    </td>
                    <td>
                        <div>
                            {{list.nobillChecked?(list.qty*factor*list.value|number:'1.0-2'):''}}
                        </div>
                    </td>
                </ng-container>
                <td *ngIf="!factor">
                    <div>
                        {{list.nobillChecked?(list.qty*list.value|number:'1.0-2'):''}}
                    </div>
                </td>
                <td>
                    <input type="checkbox" id="vehicle3" name="vehicle3" value="Bikee"
      [disabled]="list.billChecked"
      [(ngModel)]="list.nobillChecked"
      (change)="recalculate()"
    >
  </td>
                <td>
                    <input type="checkbox" id="vehicle2" name="vehicle2" value="Bikes"
      [disabled]="list.nobillChecked"
      [(ngModel)]="list.billChecked"
      (change)="recalculate()"
    >
  </td>
            </tr>

同样，仅考虑“列表”、“因素”、“总计”和“总计”形式的值。您可以在（更改）中再次计算值

  recalculate() {
    [this.totale,this.total,this.factor]=this.calculateTotals()
  }

（我用“解构”给三个变量赋值）。好吧，函数 return 一个数组，通过解构为变量赋值。

我不太确定它是否正确in the stackblitz，但认为更少的变量和更少的变量可以累积，使事情更容易检查。是的，当我们考虑性能时，可以看出“重新计算”一切都不是很好。真的花在“重新计算”上的时间都没有意义，让代码更“健壮”

如何设置复选框单击时函数调用的条件

How to set condition for function call on checkbox click

javascript

angular

npm

angular6

angular7