`ngModel` не работает должным образом при привязке к входному тегу в ngFor, он теряет фокус, когда я начинаю печатать

Question

У меня есть простой объект рецепта, который я хочу представить здесь.

name:One,
category: Veg,
ingredient:[
"This is Ingredient 1",
"This is Ingredient 2"
]

Итак, мой код компонента выглядит следующим образом. Я использовал ngFor, чтобы получить данные и связать их с тегом ввода.

      <div *ngFor="let ingredient of recipe.ingredients; let i = index;" class="input-group each-step">
        <span class="input-group-prepend" id="basic-addon1">
          <span class="input-group-text">{{i+1}}</span>
        </span>
        <input type="text" class="form-control" [(ngModel)]="recipe.ingredients[i]" name="ingredient{{i}}">
      </div>

Итак, я смог связать данные, но есть две основные проблемы. Я чувствую, что они связаны между собой.

1. Атрибут имени, который я хотел представить с помощью name="ingredient{{i}}", не отображается.
2. Всякий раз, когда я начинаю писать, он теряет фокус, как вы можете видеть в Gif ниже.

Как решить эту проблему, если я не хочу использовать ReactiveForms.

Answer 1

ngModel не будет работать с переменными.recipe в *ngFor должен быть массивом допустимого JSON, чтобы он мог повторяться.ngModel неправильно привязан, не может обновить модель, поэтому перемещает фокус.Он должен был что-то показывать в журнале ошибок.

Чтобы заставить его работать в ng, выполните итерацию по массиву с длиной recipe.ingredients.

<div *ngFor="let ingredient of [1,2]; let i = index" class="input-group each-step">
    <span class="input-group-prepend" id="basic-addon1">
     <span class="input-group-text">{{i+1}}</span>
    </span>
    <input type="text" #input class="form-control" [(ngModel)]="recipes[0].ingredient[i]"> 

</div>

Демонстрация

Если число элементов ingredient не равно 2, создайте массив для итерационных целей:

Машинопись:

  iterator = [];

  constructor() {
    this.recipes.forEach(item => item.ingredient.map(item =>
      this.iterator.push(item)));
  }

HTML:

<div *ngFor="let ingredient of iterator; let i = index" class="input-group each-step">

...

Демо