Kontrola dynamiczna Angular 2 attr

Question

W obliczu problemu z przyciskiem radiowym podczas korzystania z karty. kiedy nadałem dynamiczną nazwę, tworząc atrybut ng-relfect-name, ale nie nazwę, to dlatego indeks mojej karty nie działa. Muszę nadać atrybutowi nazwę, aby poprawnie działała.

<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

podkreślić tekst Użyłem [attr.name], aby dodać atrybut 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 wyglądać

<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> 

teraz widać atrybut name, kątowe nie jest zapełnianie atrybut nazwy, jeśli używasz {{}} w nazwie, a jeśli nie używać {{}} wydrukuje wartość jako ciąg bez wartościowania. Powoduje to problem z domyślną funkcjonalnością indeksu zakładki html, ponieważ jest oparty na atrybucie name.

Answer 2

Nie potrzebujesz {{}} w wyrażeniu wewnętrznym. Po prostu zrobi to i.

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

[] wokół ngModel już mówi, że wartość kątowa jest wyrazem.

Alternatywnym sposobem wiązania sznurków jest

src="{{imgSourceProp}}.png" 

(nie [] wokół src)

Jeśli chcesz atrybut w DOM (wiązań Angular2 domyślnie wiążą się majątku, nie przypisują) używać [attr.name]="model.questions[i].answer" lub attr.name="{{model.questions[i].answer}}"