帶有模板變量和雙向綁定的角度形式 *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>