Название динамического управления угловым 2 attr

Question

Облицовочная проблема с переключателем при использовании вкладки. когда я дал динамическое имя, он создавал ng-relfect-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

выделенный текст я использовал [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> 

теперь вы можете видеть имя атрибута, угловатый не заселять имя атрибута, если вы используете {{}} в названии, и если вы не используете {{}} он будет печатать значение как строку без оценки. Это вызывает проблему в функциональности по умолчанию для индекса вкладки html-переключателя html, поскольку он основан на атрибуте имени.

Answer 2

Не требуется {{}} внутри выражения. Просто 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}}"