html - 动态生成具有angular 2的输入字段类型并设置字段的类型

Question

我是 Angular 2 的新手，并尝试基于使用 Angular 2 的模型动态生成一堆输入字段。有些字段是密码字段。如果是这样，我想让输入字段输入密码。我写过这样的东西:

<div *ngFor="let field of connector.type.configFields">
    <label>{{field.name}}</label>
    <input [(ngModel)]="field.value" />
</div>

现在的问题是，如果 field.name 是密码，我想设置字段密码 我正在考虑在输入中添加这样的内容

<div *ngFor="let field of connector.type.configFields">
    <label>{{field.name}}</label>
    <input [(ngModel)]="field.value" *ngIf="field.name =='Password'" type="password"  />
</div>

现在，如果我这样做，我所有其他不是密码的字段都不会呈现。仅呈现密码字段。我做错了什么。(我对angular2很陌生)

Answer 1

这可能有效，但据我所知，不支持动态设置 type(但可能值得一试):

<input [(ngModel)]="field.value" [type]="field.name === 'Password' ? 'password' : 'text'"/>

这是安全的选择:

<input [(ngModel)]="field.value" *ngIf="field.name === 'Password'" type="password"  />
<input [(ngModel)]="field.value" *ngIf="field.name !== 'Password'" type="text"  />

如果 field.name 是 'Password'，则添加第一个，否则将第二个输入添加到 DOM。