Angular 使用模板变量和双向绑定的形式 *ngfor

Question

我查看了好几篇关于此类问题的帖子，但没有找到解决方案。

描述：

初始化时显示的所有内容都带有最后一个对象值 "profession" (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);
}

结果页面加载：编辑一些输入字段时的结果：

我哪里出错了？

EDIT1：这是结果 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>

Angular 使用模板变量和双向绑定的形式 *ngfor

Angular form *ngfor with template variable and two way binding

angular

iteration

ngfor

angular-template-variable