带模板变量和双向绑定的角形式* ngfor

Question

我已经调查了几篇有关此类问题的文章，但没有找到解决方案。

说明：

• 显示的所有内容都带有init上的最后一个对象值“专业”（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>