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

Question

我有一个表，其中包含名为 NoBill 和 Bill 的列，其中包含复选框作为值。

表格默认视图

当 NoBill 复选框被点击一次 totale(this.totale) 值被计算出来。

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

当 total(this.total) 值计算后，点击 Bill 列复选框。它还会打开两个名为 Ratio 和 Revasst 的新列。

总价值和比率计算在这里

比率的计算公式是（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>

同样，仅考虑“list”、“factor”、“total”和“totale”形式的值。您可以在（更改）中简单地再次计算值

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

（我使用“解构”来给三个变量赋值）。嗯，函数返回一个数组，解构赋予变量值。

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