Javascript 角度：ngfor中的输入元素具有假值

我在ngFor指令中有一个输入。当我在输入元素中键入时，每次击键时，当前值都应保存在数据结构中。但是，只要我在输入元素的外部单击，我在输入字段中键入的所有内容都会复制到下面的输入字段中

我不想使用ng模型，因为“recipe”作为输入传递到此组件，更改一个属性意味着在服务中更新它（这将触发观察数据的更新，并将新值带到父级，然后再带到子级（此组件））

HTML

 <div class="collapse" id="collapsingInstructions">
    <ul id="list-instructions" class="list-group list-group-flush instructionsGroup">
      <li *ngFor="let instruction of recipe.instructions; let index = index" class="list-group-item d-flex">
        <input class="form-control" placeholder="Boil water."
                  [value]="instruction"
                  [id]="'instruction' + index"
                  #instructionInput
                  (change)="updateInstruction(index, instructionInput.value)">
        </input>
      </li>
    </ul>
  </div>

---

copyButChangeInstruction

此方法返回被调用对象的深度副本，但索引处的一个更改的指令除外（因为我尝试使用函数数据模型方法）

我猜问题可能是所有输入都具有相同的模板引用-#instructionInput。您可以尝试将索引添加到模板ref name，或者我认为您也可以从$event获得它

export class InstructionsComponent implements OnInit {

  @Input()
  recipe: Recipe;

  constructor(private recipeService: RecipeService) {
  }

  updateRecipe(recipe: Recipe): void {
    this.recipeService.replaceRecipe(this.recipe.id, recipe);
  }

  updateInstruction(index: number, instruction: string): void {
    this.updateRecipe(this.recipe.copyButChangeInstruction(index, instruction));
  }
}