Javascript 如何将特定索引的数组分配给另一个嵌套数组？

我在单击按钮时添加了一个材质扩展面板，并尝试将内容的值绑定到模型数组的每个索引中。我的数组中定义了另一个数组，这让我在分配嵌套数组的值时感到头疼。第一个索引正确绑定，但数组的第二个和第三个索引重复。我也在做双向绑定，我将删除它并将其绑定到服务

<mat-card>
<mat-card-content>
  <div class="pesticide-info">
    <h2 class="h3 text-center">Pesticide Information</h2>
    <mat-accordion>
      <mat-expansion-panel *ngFor="let item of recordPesticideInfos; let i = index" [attr.data-index]="i">
        <mat-expansion-panel-header>
          <mat-panel-title>
            Pesticide Product
          </mat-panel-title>
          <mat-panel-description>
            Enter the Pesticide Information
          </mat-panel-description>
        </mat-expansion-panel-header>
        <div *ngFor="let pest of item.pesticideInfo; let j = index" [attr.data-index]="j">
          <mat-form-field [floatLabel]="auto">
            <mat-label>Product</mat-label>
            <!-- <input name=Product{{index}} [(ngModel)]="recordPesticideInfos[index].pesticideInfo[index].Product" placeholder="item">-->
            <input matInput placeholder="Product Name" [(ngModel)]="pest.Product" name=Product{{countOfProduct}}
              #Product="ngModel">                
          </mat-form-field>
        </div>
      </mat-expansion-panel>
      <div class="add-product text-center">
        <a class="btn btn-success text-white" (click)="addItem()" style="text-align: center"><i
            class="fa fa-plus"></i> Add Product</a>
      </div>
    </mat-accordion>
  </div>
</mat-card-content>

第一个索引正确绑定，但数组的第二个和第三个索引重复。我也在做双向绑定，我将删除它并将其绑定到服务

<mat-card>
<mat-card-content>
  <div class="pesticide-info">
    <h2 class="h3 text-center">Pesticide Information</h2>
    <mat-accordion>
      <mat-expansion-panel *ngFor="let item of recordPesticideInfos; let i = index" [attr.data-index]="i">
        <mat-expansion-panel-header>
          <mat-panel-title>
            Pesticide Product
          </mat-panel-title>
          <mat-panel-description>
            Enter the Pesticide Information
          </mat-panel-description>
        </mat-expansion-panel-header>
        <div *ngFor="let pest of item.pesticideInfo; let j = index" [attr.data-index]="j">
          <mat-form-field [floatLabel]="auto">
            <mat-label>Product</mat-label>
            <!-- <input name=Product{{index}} [(ngModel)]="recordPesticideInfos[index].pesticideInfo[index].Product" placeholder="item">-->
            <input matInput placeholder="Product Name" [(ngModel)]="pest.Product" name=Product{{countOfProduct}}
              #Product="ngModel">                
          </mat-form-field>
        </div>
      </mat-expansion-panel>
      <div class="add-product text-center">
        <a class="btn btn-success text-white" (click)="addItem()" style="text-align: center"><i
            class="fa fa-plus"></i> Add Product</a>
      </div>
    </mat-accordion>
  </div>
</mat-card-content>

}

}

我想在每次单击按钮时绑定一个新的数组值

---

这是stackblitz url:

问题出在这一行：

pesticideInfo: this.pesticides as PesticideInfo[]

每次添加新产品时，它都会从this.member变量获得完全相同的对象引用

它对第一项起作用的原因是您在其中创建了新的内联对象：

pesticideInfo: [{
    PesticideInfoId: null,
    Product: null      
}]

我为创建新的默认产品项添加了此新功能：

  private createNewPesticide() {
    return {
      PesticideInfoId: null, 
      Product: null
    }
  }

---

检查工作情况。

你能从中创建一个stackblitz吗？我想你可以使用spread操作符获取一个副本，比如

杀虫剂信息：[{…this.predicates[0]}]

但我不确定你的代码谢谢你，罗伯特！现在可以了。我太过专注于处理索引，以至于忽略了这一点。泰！

  private createNewPesticide() {
    return {
      PesticideInfoId: null, 
      Product: null
    }
  }