Угловая форма *ngfor с переменной шаблона и двусторонней привязкой

Question

Я просмотрел несколько сообщений с этой проблемой, но не нашел решения.

описание:

• Все отображается с последним значением объекта "профессия" при инициализации (model.overview: IOverview)
• Привязка, кажется, работает, когда я ее меняю.
• Переменная шаблона не работает, она будет красной (если какое-либо поле недопустимо) для всех или зеленым для всех в противном случае...

html:

<div *ngFor="let item of objectKeys(model.overview)">
    <div class="col form-group">
        <label for="item">{{item}}</label>
        <input type="text" class="form-control" id="item" required [(ngModel)]="model.overview[item]" name="item"
            #inputmodel="ngModel" #spy>
        <div [hidden]="inputmodel.valid || inputmodel.pristine" class="alert alert-danger">
            {{spy.className}}
        </div>
    </div>
</div>

код:

model = new Hero('uuid', this.overview);
objectKeys(obj) {
    return Object.keys(obj);
}

Результат загрузки страницы: Результат, когда я редактирую некоторые поля ввода:

Где я здесь ошибаюсь?

РЕДАКТИРОВАТЬ1: вот полученный html: http://codebin.herokuapp.com/?s=5e6e7688a569680004000006

EDIT2: добавление исходного изображения при загрузке страницы (зеленый)

Answer 1

Решил проблему с помощью uni-diractional binding {{}} и индекс i. Спасибо @pero_hero за помощь в поиске простого решения!

Вот окончательный код:

<div *ngFor="let item of objectKeys(model.overview); let i = index">
      <div class="col form-group">
        <label for=item{{i}}>{{item}}</label>
        <input type="text" class="form-control" id=item{{i}} required [(ngModel)]="model.overview[item]"
          name=item{{i}} #inputmodel="ngModel" #spy>
        <div [hidden]="inputmodel.valid || inputmodel.pristine" class="alert alert-danger">
          {{spy.className}}
        </div>
      </div>
    </div>