javascript - 如何在 Angular 中动态生成不同的变量?
问题描述
我选择了两个复选框,金额在第一个 div 的 Total Claimed 中计算,但第二个 div 的金额也在计算。我知道的原因;因为 div 是使用数组创建的,而我有一个公共变量。现在问题出现了如何创建动态变量?
在下面的代码中,您会发现 {{ claim }} 这是公共变量,我需要它是动态的:
<p>Total Claimed: [<span [ngClass]="{'text-success': claimed <= d.program_max_limit, 'text-warning': claimed > d.program_max_limit}">{{claimed | number : '2.'}} </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);
}
}
解决方案
定义一个布尔变量类型数组并在表中使用。
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>
然后你可以使用一个吸气剂来总计
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>
注意:如果您不想使用吸气剂,您可以使用
<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"
}
推荐阅读
- python - 如何在 Python 3 中使用 cmd
- angularjs - 连接到 Angular Docker 容器时出错
- javascript - 如何在 Node.js 中创建 NTLM 令牌?
- mysql - 在使用 JSON_EXTRACT 的 SQL 语句上使用多个 HAVING 子句
- html - 为什么这个文本应该浮动到右边,但它会浮动到左边?
- android - 如何根据android中该视图的坐标知道一个视图何时位于另一个视图之上
- java - 从 SQLite 数据库输出到列应该显示值,但只显示默认的“TextView”
- r - 如何摆脱 plotTangentSpace() 中的错误消息?无证论据
- c - 函数参数中带有冒号的数据类型导致“错误:'int'之前的预期表达式”
- r - 如何使用 R 阅读电子邮件