angular - *ngFor 中的输入绑定到所有输入的相同值
问题描述
我在 ngFor 循环的角度 7 中遇到了问题。我想添加每个月的概率值,结果必须显示在该月表格的预期单元格中;但是当我添加概率值时,当我更改任何月份的概率时,所有月份都会显示相同的结果,相同的结果会出现在该列的所有字段中amountPrev
。
这是我的html代码:
<div style="overflow-x:auto;">
<table class="styled-table" border="1" cellpadding="0" cellspacing="0">
<thead>
<tr height="50">
<th align="center" width="150"> </th>
<td align="center" width="150" colspan="5" *ngFor="let item of listMoisAnnee">{{item}}</td>
</tr>
</thead>
<tbody>
<tr height="50">
<td align="center" width="150" style="background-color:#d4cdc94f;"> </td>
<ng-container *ngFor="let item of listMoisAnnee">
<td align="center" width="150" style="background-color:#d4cdc94f;">Valeur origine</td>
<td align="center" width="150" style="background-color:#d4cdc94f;">Probabilité en(%)</td>
<td align="center" width="150" style="background-color:#d4cdc94f;">Montant Prevu</td>
<td align="center" width="150" style="background-color:#d4cdc94f;">Tva déductible/immo </td>
<td align="center" width="150" style="background-color:#d4cdc94f;">TTC </td>
</ng-container>
</tr>
<tr height="50" *ngFor="let item of listEcheances;let parentIndex=index; trackBy:trackByIndex ">
<th>{{item.Intitule}}</th>
<ng-container *ngFor="let d of datee">
<td>
<ng-container *ngFor="let subItem of item.value;"><label
*ngIf="subItem.date === d ">{{subItem.valeurOrigine}}</label></ng-container>
</td>
<td>
<ng-container *ngFor="let subItem of item.value; ">
<input id="k" *ngIf="subItem.date === d " type="number"
[ngModel]="probaReal[parentIndex]"
(ngModelChange)="calcul([subItem.valeurOrigine][parentIndex],$event)"
style="border: none;">
</ng-container>
</td>
<td>
<ng-container *ngFor="let subItem of item.value;let k =index">
<input *ngIf="subItem.date === d " type="number"
[ngModel]="montantPrev[parentIndex]" style="border: none;">
</ng-container>
</td>
<td></td>
<td></td>
</ng-container>
</tr>
</tbody>
</table>
</div>
这是我的 .ts 代码:
import { Component, VERSION } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
dateDebut = "Jan-2021"
dateFin = "Dec-2021";
listMoisAnnee=["Janvier-2021","Février-2021","Mars-2021"]
datee=["2021-01","2021-02","2021-03"]
listEcheances = []
sousListEcheances = []
probaReal: any = [];
montantPrev=[]
data={
"Pc": [
{
"idEch": 1,
"intitule": "Pc",
"date": "2021-01",
"year": 2021,
"month": "JANUARY",
"valeurOrigine": 1.5E7
},
{
"idEch": 2,
"intitule": "Pc",
"date": "2021-02",
"year": 2021,
"month": "FEBRUARY",
"valeurOrigine": 1.5E7
},
{
"idEch": 3,
"intitule": "Pc",
"date": "2021-03",
"year": 2021,
"month": "MARCH",
"valeurOrigine": 7.0E7
}
],
"XXX": [
{
"idEch": 10,
"intitule": "XXX",
"date": "2021-02",
"year": 2021,
"month": "FEBRUARY",
"valeurOrigine": 5000000.0
},
{
"idEch": 11,
"intitule": "XXX",
"date": "2021-03",
"year": 2021,
"month": "MARCH",
"valeurOrigine": 5000000.0
}
]
}
constructor() { }
ngOnInit() {
this.getListEcheance(this.dateDebut,this.dateFin)
}
getListEcheance(dateDebut, dateFin) {
this.listEcheances = Object.keys(this.data).map(key => ({ Intitule: key, value: this.data[key] }));
}
calcul(item,proba) {
this.datee.forEach((i,k)=>{
this.montantPrev[k]=(proba * item)/100
console.log(this.montantPrev[k])
})
}
trackByIndex(index: number, value: number) {
return index;
}
}
Could anyone tell me what is the mistake that I'm making?
解决方案
我想问题是你总是写相同的变量值montantPrev
。parentIndex
您用作索引的变量总是会出现0
,但您正在尝试更改拼接数组。因此,您应该选择一个唯一值,例如idEch
.
像这样更改您的第一个输入:
<input id="k_{{subItem.idEch}}" *ngIf="subItem.date === d " type="number"
[ngModel]="probaReal[subItem.idEch]"
(ngModelChange)="calcul(subItem.valeurOrigine, subItem.idEch,$event)"
style="border: none;">
像这样更改您的第二个输入:
<ng-container *ngFor="let subItem of item.value;let k =index">
<input *ngIf="subItem.date === d " type="number"
id="d_{{subItem.idEch}}"
[ngModel]="montantPrev[subItem.idEch]" style="border: none;">
</ng-container>
像这样改变你的calcul
方法:
calcul(item, index, newValue) {
this.montantPrev[index] = (newValue * item) / 100;
console.log(this.montantPrev);
}
这是工作演示。
推荐阅读
- python - 如何从python中的包导入非包
- c# - LINQ 将列表项列表加入一个列表
- r - 使用 ggplot2 在 R 中标记计数器位置
- jquery - Jquery向按钮添加额外的字符
- excel - 需要使用 Apache POI 在 ADF 中下载 Excelsheet
- python - 对于给定的稀疏矩阵,如何将其与给定的二进制值向量相乘
- android - java.lang.NoClassDefFoundError:解析失败:Lcom/Google/Android/gms/common/API/API$zzf;
- php - 上传文件后运行 PHP 代码
- amazon-web-services - 使用 AWS Cognito 连接到基于 VPC 的 Kibana
- mixins - for 什么时候调用迭代器方法?