Javascript 在Angular中制作editForm最简单的方法是什么？

在我的数据库中，我有很多用户，他们有很多食谱。 每个配方都有一些特性和成分集合。 下面是截图

所以，当用户在页面上显示要编辑的配方时，应显示（表单）带有加载的当前数据的配方。这是一种工作，因为我可以看到数据，但我认为它做得不好

我有没有阵列（成分）的形式，这是工作良好。你能告诉我如何在编辑表单中添加成分吗

如果您能看到我的代码，并给我反馈和提示我应该更改什么，我将不胜感激

export class RecipeEditComponent implements OnInit {
  @ViewChild('editForm') editForm: NgForm;
  recipe: IRecipe;
  photos: IPhoto[] = [];
  ingredients: IIngredient[] = [];
  uploader: FileUploader;
  hasBaseDropZoneOver = false;
  baseUrl = environment.apiUrl;
  
  currentMain: IPhoto;
  constructor(private route: ActivatedRoute, private recipeService: RecipeService,
    private toastr: ToastrService) { }

  ngOnInit(): void {
    this.loadRecipe();  
  }

  loadRecipe() {
    this.recipeService.getRecipe(this.route.snapshot.params.id).subscribe(recipe => {
      this.recipe = recipe;
      this.initializeUploader();
    })
  }
  updateRecipe(id: number) {
    this.recipeService.editRecipe(id, this.recipe).subscribe(next => {
      this.toastr.success('Recipe updated successfully');
      this.editForm.reset(this.recipe);
    }, error => {
      this.toastr.error(error);
    });
  }

}

HTML

问题在于代码的这一部分：

 <div *ngFor="let ingredient of recipe.ingredients; let i = index">
    
                <input class="form-control" type="text" name="{{ingredient.name}}" [(ngModel)]="ingredient.name">
                <input class="form-control" type="text" name="{{ingredient.amount}}" [(ngModel)]="ingredient.amount">
              </div>
            </div>

但是我不知道如何让它工作

如何将数组添加到模板驱动表单？ 在我的情况下，我需要显示当前的成分并能够编辑它们。

我试过这样的方法：

<input class="form-control" type="text" name="ingredient[i].name" [(ngModel)]="ingredient[i].name">
            <input class="form-control" type="text" name="ingredient[i].amount" [(ngModel)]="ingredient[i].amount">

---

但是id不起作用

问题是必须定义表单上的属性

name

，以便angular知道要更新哪个输入。您将名称绑定到可编辑模型设置为的同一属性，这意味着用户可以编辑它，实际上可以删除它，这是不好的

解决方案是将其更改为不变的唯一值。这应该起作用：

链接到stackblitz，显示其工作：

---

编辑：修复了原始帖子中的错误，并添加了stackblitz的链接

目前我有2种成分。如果我在第页上使用您的解决方案，我只有4个字段，其中包含金额？“您正在将名称绑定到可编辑模型设置为的同一属性，这意味着用户可以编辑并删除它。-这就是我要做的！我不明白为什么您的用户需要编辑输入字段的名称。这只是一个标识符，因此angular知道要更新哪个字段。重要的是编辑值。”e这是通过ngmodelOk完成的。我在我的原始帖子中发现了这个错误。每个字段都需要一个唯一的ID，我给名称和金额字段分配了相同的ID。我更新了我的答案，其中包括一个指向stackblitz的链接，显示它正在工作。你的解决方案解决了这个问题，但当我更新该方法中的配方时，会执行此。editForm、 重置（this.recipe）和表单正在重置。值：Name、Description可见，但包含成分的字段为空。你知道为什么吗？

reset

将清除所有输入。Name和Description不会被清除，因为它们不是输入，只是代码中的硬编码文本。我想我不确定想要的效果是什么

 <div *ngFor="let ingredient of recipe.ingredients; let i = index">
    
                <input class="form-control" type="text" name="{{ingredient.name}}" [(ngModel)]="ingredient.name">
                <input class="form-control" type="text" name="{{ingredient.amount}}" [(ngModel)]="ingredient.amount">
              </div>
            </div>

<input class="form-control" type="text" name="ingredient[i].name" [(ngModel)]="ingredient[i].name">
            <input class="form-control" type="text" name="ingredient[i].amount" [(ngModel)]="ingredient[i].amount">