*ngFor 中的输入绑定到所有输入的相同值

Question

我在 angular 7 in ngFor 循环中遇到了问题。我想添加每个月的概率值结果必须显示在该月 table 的预期单元格中；但是当我添加概率值时，所有月份都会显示相同的结果当我更改任何月份的概率时，相同的结果出现在 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">&nbsp;</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;">&nbsp;</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?

Answer 1

我猜问题是你总是写相同的变量值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);
  }

This 正在运行演示。

*ngFor 中的输入绑定到所有输入的相同值

Input in *ngFor binds to same value for all inputs

angular

ngfor