Question

使用简单的表单或数组项：

      <div *ngFor="let ingredient of recipe.ingredients; let i = index">
        <div>
          <input type="text" [name]="i + '_ingName'" [(ngModel)]="ingredient.name" required>
        </div>
        <div>
          <button type="button" (click)="removeIngredient(i)">X</button>
        </div>
      </div>
      <button type="button" (click)="addIngredient()">Add Ingredient</button>

和按钮方法：

addIngredient() {
  this.recipe.ingredients.push(new Ingredient('New ingredient...', 0));
  console.log(this.recipe.ingredients);
}

removeIngredient(i: number) {
  this.recipe.ingredients.splice(i, 1);
  console.log(this.recipe.ingredients);
}

和初始值：

第一成分，第二成分

然后先删除：

第二成分

然后添加新内容：

新成分，新成分

当除去第一成分时，一切工作正常-表格保留第二成分。但是，当添加新成分时，即使添加了“第二成分”和“新成分”后，即使在控制台上登录了正确的阵列，两个结果项都是“新成分”。为什么第二成分在表格上消失了？

但是，当首先拼接第二个元素时，即使添加了新的子项，一切也看起来还不错。...

Stackblitz： https://stackblitz.com/edit/angular-rw7a5h

ngFor上带有拼接和推入的角度奇怪行为

0 个答案: