angular - 带有模板变量和两种方式绑定的角度形式 *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：在页面加载时添加初始图片（绿色）

标签： angulariterationngforangular-template-variable

Answer 1

uni-diractional binding {{}}通过使用 a和 index解决了这个问题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>