如何在 Angular 中动态生成不同的变量？

Question

我选择了两个复选框，金额在第一个 div 的 Total Claimed 中计算，但第二个 div 的金额也在计算。我知道的原因；因为 div 是使用数组创建的，而我有一个公共变量。现在问题来了，如何创建动态变量？

在下面的代码中，您会发现 {{claimed}} 这是公共变量，我需要它是动态的：

<p>Total Claimed: [<span [ngClass]="{'text-success': claimed <= d.program_max_limit, 'text-warning': claimed > d.program_max_limit}">{{claimed | number : '2.'}}&nbsp;</span> Of {{d.program_max_limit | number : '2.'}}]</p>

component.ts 这是计算部分的功能：

  calc(event,val, id) {
    console.log(val,id)
    var i=0;
    if(id == event.target.value){
       if(event.target.checked ){ 
        this.claimed = parseInt(this.claimed) + parseInt(val);
        if (this.claimed > this.max_amount) {
          this.push.showError("You Have Reached the Maximum Limit");
          this.isDisabled = true;
          this.checkForm.reset();
          this.claimed = 0;
        } else {
          this.isDisabled = false;
        }
      } else {
        this.claimed = parseInt(this.claimed) - parseInt(val);
      }

    }

Answer 1

定义一个布尔变量类型数组并在表中使用。

check:boolean[]=[]; //<--see that you equal to an array

我想你有一些喜欢

<tr *ngFor="let item of listItems;let i=index">
<td>{{item.invoiceAmmount}}</td>
...
<td><input type="checkbox" [(ngModel)]="check[i]"></td>
</tr>

然后你可以使用 getter 来总计

get total()
{
   let total=0;
   this.listItems.forEach((x,index)=>{
     if (check[index])
         total+=x.invoiceAmmount;
   })
   return total;
}

在你的 .html 中

Total:{{total}}
<div *ngIf="total>max_ammount">You has execeded tha ammout!</div>

注意：如果你不想使用 getter，你可以使用

<td><input type="checkbox" [ngModel]="check[i]"
                           (ngModelChange)="check[i]=$event;getTotal()">
</td>

getTotal()  //<--your function getTotal
{
       let total=0;
       this.listItems.forEach((x,index)=>{
         if (check[index])
             total+=x.invoiceAmmount;
       })
       this.total=total //<--store the total in a variable "total"
}