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

Question

在我的数据库中，我有很多用户，他们有很多食谱。每个食谱都有一些属性和成分集合。因此，当用户在页面上显示要编辑的配方时，应该会出现（表格）加载了当前数据的配方。这是一种工作，因为我可以看到数据，但我认为它做得不好。我的表格在没有数组（成分）的情况下工作正常。你能告诉我应该如何将成分添加到我的编辑表单中吗？如果您看到我的代码并给我反馈并提示我应该更改什么，我将不胜感激。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);    });  }}

Answer 1

问题是必须定义表单上的属性name，以便 Angular 知道要更新哪个输入。您将 name 绑定到可编辑模型设置的同一属性，这意味着用户可以编辑它，实际上可以删除它，这不好。

解决方案是将其更改为不会更改的唯一值。这应该有效：

<div *ngFor="let ingredient of recipe.ingredients; let i = index">

    <input class="form-control" type="text" name="name{{ingredient.id}}" [(ngModel)]="ingredient.name">

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

  </div>

</div>