通过将对象的数据插入到以列作为输入的表中来循环对象列表

Question

我正在尝试循环对象列表，对于其中存在的每个对象，我想在表中插入一行。

我遇到的问题涉及我想要表示为可编辑输入的表的列，我无法插入正确的数据。

所有行的“日期比率”输入字段似乎都从比率列表中的最后一个对象获取数据比率值，而不是每行的特定日期比率值。

这是代表情况的图像（不考虑日期格式）。正如您所看到的，rateList 中最后一个对象的 DataRata 值已插入，但我可以向您保证，每个对象的值都在列表中正确设置。

我正在使用 Angular 11。

HTML：

<div class="row mt-3 col-md-12" *ngIf="pianoGenerato && pianoQuotaSelected">
  <div class="col-md-10 mx-auto col-sm-12">
    <form class="webcau-form" [formGroup]="pianoRientriForm">
      <div class="webcau-yellow-border-2 mb-4">
        <div class="form-page-container m-3">
          <div id="accordingpianoQuota" role="tablist" aria-multiselectable="true">
            <webcau-prodotto-section-title
              [htmlReference]="'PianoQuota'"
              title="Piano Rate dal {{pianoRientriSceltaForm.get('DataPrimaRataPiano')?.value | date: datetime.DATE_ANGULAR_VIEW_FORMAT}}"
              titleClass="h4">
            </webcau-prodotto-section-title>
          </div>
          <div id="QuotaPiano" class="collapse show" role="tabpanel" aria-labelledby="headingPianoQuota">
            <div class="mx-0 px-0" style="margin-top: 30px;">
              <div class="col-md-12 mx-0 px-0">
                <div class="table-responsive container-fluid">
                  <table class="table webcau-table-striped">
                    <thead>
                      <tr align="center">
                        <th scope="col">Azione</th>
                        <th scope="col">Numero Rata</th>
                        <th scope="col">Data Rata</th>
                        <th scope="col">Importo Rata</th>
                        <th scope="col">Quota Capitale</th>
                        <th scope="col">Quota Interesse</th>
                        <th scope="col">Debito Residuo</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr *ngFor="let rata of rateList; let i = index">
                        <td>
                          <button type="button" class="btn btn-primary mr-1" style="height: fit-content">
                            Seleziona
                          </button>
                        </td>
                        <td align="center">{{rata.NumeroRata}}</td>
                        <td align="center">
                          <input placeholder="" type="text" class="input-group form-control webcau-yellow-border-1"
                                 formControlName="DataRata"
                                 [(ngModel)]="rata.DataRata">
                        </td>
                        <td align="center">
                          <input placeholder="" type="text" class="input-group form-control webcau-yellow-border-1"
                                                   name="importoRata"
                                                   formControlName="ImportoRata"
                                 [(ngModel)]="rata.ImportoRata">
                        </td>
                        <td align="center">{{rata.QuotaCapitale}} €</td>
                        <td align="center">{{rata.QuotaInteresse}} €</td>
                        <td align="center">{{rata.DebitoResiduo}} €</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-12 my-2" *ngIf="pianoSelected">
            <button type="button" class="btn btn-secondary mr-1" style="height: fit-content" (click)="cancellaPiano()">
              <fa-icon [icon]="utilityService.faIconSelect('faTimes')"></fa-icon>
              Cancella Piano
            </button>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>

打字脚本：

public generaPianoAQuotaCapitaleCostante(
  importoTotaleDaRateizzare: number,
  importoRataAcconto: number,
  dataDiAcconto: Date,
  dataPrimaRata: Date,
  incrDateRata: number,
  tassoDiAmmortamento: number
): void {
  const numeroRateAnnuali = Number(this.pianoRientriSceltaForm.get('NumeroRateAnnualiPiano')?.value);
  const numeroRateTotali = Number(this.pianoRientriSceltaForm.get('NumeroRateTotaliPiano')?.value);
  const quotaCapitaleAcconto = 0;
  const debitoResiduo = importoTotaleDaRateizzare;
  let debitoResiduoSuccessivo: number = 0;
  let debitoResiduoPrecedente: number = 0;
  let dataRataSuccessiva: Date | null = null;

  this.rateList.push({
    NumeroRata: 'Acconto',
    DataRata: dataDiAcconto,
    ImportoRata: Number(importoRataAcconto).toFixed(2),
    DebitoResiduoIniziale: null,
    QuotaInteresse: null,
    QuotaCapitale: quotaCapitaleAcconto.toString(),
    DebitoResiduoFinale: null,
    DebitoResiduo: debitoResiduo.toString()
  });

  for (let i = 0; i <= numeroRateTotali - 1; i++) {
    if (i === 0) {
      const rata = {
        NumeroRata: (i + 1).toString(),
        DataRata: dataPrimaRata,
        ImportoRata: Number((debitoResiduo / numeroRateTotali) + (debitoResiduo * tassoDiAmmortamento / numeroRateAnnuali)).toFixed(2),
        DebitoResiduoIniziale: null,
        QuotaInteresse: Number(debitoResiduo * tassoDiAmmortamento / numeroRateAnnuali).toFixed(2),
        QuotaCapitale: Number(debitoResiduo / numeroRateTotali).toFixed(2),
        DebitoResiduoFinale: null,
        DebitoResiduo: Number(debitoResiduo - quotaCapitaleAcconto).toFixed(2),
      };

      dataRataSuccessiva = new Date(dataPrimaRata?.getFullYear(), dataPrimaRata?.getMonth() + incrDateRata, dataPrimaRata?.getDate());
      debitoResiduoSuccessivo = Number(parseFloat(rata.DebitoResiduo) - parseFloat(rata.ImportoRata));
      debitoResiduoPrecedente = Number(parseFloat(rata.DebitoResiduo));
      this.rateList.push(rata);
    } else {
      if (dataRataSuccessiva !== null) {
        const rata = {
          NumeroRata: (i + 1).toString(),
          DataRata: dataRataSuccessiva,
          ImportoRata: Number((debitoResiduo / numeroRateTotali) + (debitoResiduoPrecedente * tassoDiAmmortamento / numeroRateAnnuali)).toFixed(2),
          DebitoResiduoIniziale: null,
          QuotaInteresse: Number(debitoResiduoPrecedente * tassoDiAmmortamento / numeroRateAnnuali).toFixed(2),
          QuotaCapitale: Number(debitoResiduo / numeroRateTotali).toFixed(2),
          DebitoResiduoFinale: null,
          DebitoResiduo: debitoResiduoSuccessivo.toFixed(2)
        };

        dataRataSuccessiva = new Date(dataRataSuccessiva?.getFullYear(), dataRataSuccessiva?.getMonth() + incrDateRata, dataRataSuccessiva?.getDate());
        debitoResiduoSuccessivo = Number(parseFloat(rata.DebitoResiduo) - parseFloat(rata.ImportoRata));
        debitoResiduoPrecedente = Number(parseFloat(rata.DebitoResiduo));
        this.rateList.push(rata);
      }
    }
  }

  this.openDati = false;
  this.pianoGenerato = true;
}

我尝试使用除 ngModel 以外的其他指令，但结果没有改变，实际上这些值甚至没有插入到输入中

Answer 1

我认为你可以使用你设置的索引:

<input placeholder="" type="text" class="input-group form-control webcau-yellow-border-1"
       [(ngModel)]="rateList[i].DataRata">

请注意，您不应在同一表单中使用 ngModel 和 formControl。