Angular 2动态控件名称attr

Question

使用选项卡时遇到单选按钮问题.当我给动态名称时,它创建了ng-relfect-name而不是name属性,这就是我的选项卡索引不起作用的原因.我需要给出name属性才能正常工作.

<div class="col-sm-5 form-inline">
    <span *ngFor="let rv of q.responsetypevalues; let j = index " [ngSwitch]="q.responsetype">
        <label *ngSwitchCase="'checkbox'">
            <input class="form-check-input" type="checkbox" [(ngModel)]="model.questions[i].responsetypevalues[j].checked" name="model.questions[{{i}}].responsetypevalues[{{j}}].checked"> {{rv.value}}
        </label>
        <label *ngSwitchCase="'radio'">
            <input class="form-check-input" name="model.questions[{{i}}].answer" type="radio" [(ngModel)]="model.questions[i].answer"  [value]="rv.id"> {{rv.value}}
        </label>
        <input *ngSwitchDefault type="text" class="form-control" [(ngModel)]="model.questions[i].responsetypevalues[j].value" name="model.questions[{{i}}].responsetypevalues[{{j}}].value" [value]="rv.value" />
    </span>
    <div class="error">{{q.errormsg}}</div>
</div>

Answer 1

你不需要{{}}内部表达.就是i这样.

<input class="form-check-input" type="checkbox" [(ngModel)]="model.questions[i].responsetypevalues[j].checked" name="model.questions[i].responsetypevalues[j].checked"> {{rv.value}}

在[]各地ngModel已经告诉角度,该值是一个表达式.

绑定字符串的另一种方法是

src="{{imgSourceProp}}.png"

(无[]左右src)

如果你想要DOM中的属性(Angular2绑定默认绑定到属性,而不是属性)使用[attr.name]="model.questions[i].answer"或attr.name="{{model.questions[i].answer}}"

Answer 2

我使用 [attr.name]强调文本来添​​加名称属性：

<input class="form-check-input"  type="radio" [(ngModel)]="model.questions[i].answer" name="model.questions[{{i}}].answer" [attr.name]="i" [value]="rv.id" />

html 看起来像

<label>
<input class="form-check-input ng-pristine ng-valid ng-touched" type="radio"
ng-reflect-name="model.questions[4].answer" ng-reflect-value="12"
value="12" name="4"> Very Easy
</label> 
<label>
<input class="form-check-input ng-pristine ng-valid ng-touched" type="radio"
 ng-reflect-name="model.questions[4].answer" ng-reflect-value="13" value="13" name="4"> Easy</label> 
<label>
<input class="form-check-input ng-pristine ng-valid ng-touched" type="radio"
 ng-reflect-name="model.questions[8].answer" ng-reflect-value="16"
 value="16" name="8"> Very Satisfied
</label> <label>
<input class="form-check-input ng-pristine ng-valid ng-touched" type="radio"
ng-reflect-name="model.questions[8].answer" ng-reflect-value="17"
 value="17" name="8"> Satisfied
 </label>

现在您可以看到名称属性，如果您在名称中使用 {{}} ，则 Angular 不会填充名称属性，如果您不使用 {{}} ，它会将值打印为字符串而不进行评估。这会导致默认功能出现问题html 单选按钮选项卡索引，因为它基于名称属性。