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已经告诉Angular该值是一个表达式。

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

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>

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

Angular 2动态控件名称attr

2 个答案: