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

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

表默认视图

单击NoBill复选框后，totale（this.totale）计算值

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

当点击账单列复选框时，总计（此.总计）值被计算出来。它还将打开两个名为Ratio和Revasst的新列

顶部的总值和此处的比率计算

获取比率值的公式为（total/total）。例如，如果total为110，如果total为100，则比率为110/100=1.1

因此，当我反复单击相同的账单列复选框时（2次以启用和禁用） 重复计算值total（this.total）。因此现在，总计值从110更新为120。因此，比率值变为1.2，现在是120/100，而不是110/100。这是我面临的问题。我只希望单击一次复选框，只计算一次总计值。因此，即使复选框多次单击，它仍会保持110

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

---

我认为您有几个变量，这使得检查很困难

假设你有一个函数

  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>

（我使用“解构”为这三个变量赋值）。这个函数返回一个数组，通过对变量进行解构来赋予值

---

我不确定它是否正确，但我认为变量越少，累积的变量越少，检查起来就越容易。是的，当我们考虑性能时，“重新计算”一切都不是很好。真正花在“重新计算”上的时间并不重要，而且使代码更“健壮”

唯一的方法是计算qut*值，第一个过滤器是“nobillChecked”和“billChecked”，然后计算总和（如果数组为空，我们需要考虑）。我更喜欢返回一个包含函数值的数组并使用destructuring：destructuring只是在typescript中您可以编写一些类似于

[this.a，this.b]=[1,2]

的代码，这等于make

this.a=1；这个.b=2

。另一种方法是在函数make

this.total=total；total=total；this.factor=factor

，不返回任何内容，只需调用函数.if items.length（如果数组包含它不是空数组），制作映射并减少，否则值为0，它是“三元运算符”：

value=（条件）？value1:value2

与

if（条件）相同value=value1 else value=value2

I make factor=total/totale仅当totale0和total0（两者），else factor=0-如何在.html中显示值很容易-是的，在typescript中可以使用

if（variable）{…}

这与

f（variable！==0&&variable！==undefined&&variable！==null&&aviable！==”{…}相同

0-可以为负-

*ngIf=“factor”

如果factor0则显示

*ngIf=“！factor”

仅当factor==0时显示

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