Angular 无法使用[（ngModel）]编辑离子输入值

所以我的应用程序有问题。我有一个编辑页面，用于编辑配方，但我无法编辑成分和步骤的离子输入（附图）

这是我为了更好地理解问题而录制的视频->

离子输入数据来自一个数组。这是我的配料输入代码

成分
告诉人们应该准备什么成分*
添加更多成分

这就是我为成分赋值的地方：

this.components=this.recipe.components；

这就是阵列的外观：

[“1 ½磅中型至大型布鲁塞尔芽菜，修剪（16-18）”，“1汤匙”]

在ts中用于将数组与对象而不是数组一起使用

试试这个代码

htmlcode

<ion-item *ngFor="let item of ingredients; let i =index">
        <ion-input type="text" placeholder="Add ingredient e.x. 1.5 tbsp olive oil" [(ngModel)]="item.item"
            name="ingredient_{{i}}" required #ingredient="ngModel"></ion-input>
        <ion-icon style="font-size: 16px" name="close-circle-outline"></ion-icon>
    </ion-item>

public ingredients = [{
    item: '1 ½ pounds medium to large Bsrusssessls sprouts, trimmed (16-18)'
  }, {
    item: '1tbsps'
  }];

您可以简单地使用[（ngModel）]=“配料”而不是[（ngModel）]=“配方.配料[i]”

您好，我尝试了您的建议，但仍然存在问题，有什么建议吗？您必须使用对象数组而不是字符串数组。使成分成为一个对象数组，比如成分=[{name:'some component'}，{name:'second component'}]。将字符串数组转换为对象的一个简单解决方案是使用管道。

 <ion-input type="text" placeholder="Add ingredient e.x. 1.5 tbsp olive oil" [(ngModel)]="ingredient" name="ingredient_{{ i }}" required #ingredient="ngModel"></ion-input>