带有模板变量和两种方式绑定的角度形式 *ngfor答案

【问题标题】：Angular form *ngfor with template variable and two way binding带有模板变量和两种方式绑定的角度形式 *ngfor
【发布时间】：2020-03-15 17:04:34
【问题描述】：

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

说明：

在初始化时，所有内容都显示为最后一个对象值“职业”（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：在页面加载时添加初始图片（绿色）

【问题讨论】：

能否将生成的 htm 添加到 op 中？
那么，您不能有条件地应用警报类吗？
这个alt div似乎没有附加一个“唯一”范围的模板变量......（有点合并）即使当我输入一些东西时，输入字段中的值也总是“专业”其中设置正确。 @pero_hero 你是什么意思htm？你的意思是html？我无法添加。
您可以尝试在您的 *ngFor 中使用索引以获得唯一的 ID 吗？ *ngFor="let item of objectKeys(model.overview); let i = index" 和 id="'item'+i"
ID 现在是唯一的：我使用了 for=item{{i}} 和 id=item{{i}} pastiebin.com/5e6e901acaca9 但是警报和错误初始化表单的问题仍然存在......

标签： angular iteration ngfor angular-template-variable

【解决方案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>

【讨论】：