Tên điều khiển động 2 góc điều khiển

Question

Đối mặt với vấn đề với nút radio trong khi sử dụng tab. khi tôi đưa ra tên động nó tạo ra ng-relfect-name nhưng không phải thuộc tính name đó là lý do tại sao chỉ mục tab của tôi không hoạt động. Tôi cần cung cấp cho thuộc tính name để làm việc tab một cách chính xác.

<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

văn bản được nhấn mạnh tôi đã sử dụng [attr.name] để thêm thuộc tính tên:

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

html trông giống như

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

bây giờ bạn có thể thấy thuộc tính tên, góc không Populating thuộc tính tên nếu bạn sử dụng {{}} trong tên, và nếu bạn không sử dụng {{}} nó sẽ in giá trị dưới dạng chuỗi mà không đánh giá. Điều này gây ra vấn đề trong chức năng mặc định của chỉ mục tab nút radio html, vì nó dựa trên thuộc tính name.

Answer 2

Bạn không cần {{}} biểu thức bên trong. Chỉ cần i sẽ thực hiện.

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

Các [] xung quanh ngModel đã nói với góc rằng giá trị là một biểu hiện.

Một cách khác cho các chuỗi liên kết là

src="{{imgSourceProp}}.png" 

(không [] xung quanh src)

Nếu bạn muốn các thuộc tính trong DOM (bindings Angular2 bởi ràng buộc mặc định cho tài sản, chứ không phải thuộc tính) sử dụng [attr.name]="model.questions[i].answer" hoặc attr.name="{{model.questions[i].answer}}"