2016-07-21 2 views
3

ngFor 안에 선택한 속성을 설정하려고합니다. 브라우저가 멍청하기 때문에 아래의 코드는 작동하지 않으며 checked=false은 여전히 ​​체크 한 것으로 계산됩니다 ...Angular2에서 ngfor 속성을 설정하십시오.

따라서 반환되는 모든 것은 true 또는 null이어야합니다. 나는이 사람들이 *ngIf for html attribute in Angular2을 게시 한 것을 보았지만 for 루프에서이 함수로 값을 전달해야하므로이 함수를 사용할 수 없다.

또한 [attr.checked]을 click 이벤트와 같은 함수로 설정하려고했지만 그 중 하나도 작동하지 않았습니다.

템플릿 :

<div class="tools"> 
    <div class="radio-group group-{{section.name}}"> 
    <label *ngFor="let content of section.content" class="{{content.name}}"> 
     <input 
     type="radio" 
     name="{{section.three}}-{{section.name}}" 
     value="{{content.id}}" 

<!-- This is my problem --> 
     [attr.checked]="content.id === section.default" 
<!-- You've just pass the problem --> 

     (click)="updateModel(section, content)" /> 
     <div class="radio"> 
     <span *ngIf="content.thumbnail.charAt(0) == '#'" 
      class="image" [style.background-color]="content.thumbnail"> 
     </span> 
     <span *ngIf="content.thumbnail.length > 0 && 
        content.thumbnail.charAt(0) != '#'" class="image"> 
      <img src="/thumbnails/{{section.three}}/{{content.thumbnail}}.jpg" alt="" /> 
     </span> 
     <span *ngIf="content.thumbnail == ''" class="image"></span> 
     <span class="label">{{content.displayName}}</span> 
     </div> 
    </label> 
    </div> 
</div> 

구성 요소 :

import { Component, Input } from '@angular/core'; 
import { AService } from './a.service'; 

@Component({ 
    selector: '[radio]', 
    templateUrl: 'app/newtabs/ui.radio.component.html' 
}) 
export class UiRadioComponent { 
    constructor(private aService: AService) {} 

    @Input() section:any; 

    updateModel(info: any, content: any) { 
      //does things but not important 
     } 
    } 
} 
+0

잠깐, 내 ngfor의 색인이 문제를 해결하겠습니까? 나는 이것이 이것을 해결할 것이라고 생각한다. 나는 사건으로 돌아왔다! – davimusprime

+0

아니, 그건 바보 같아서 도움이되지 않아. – davimusprime

답변

6

당신은 단순히 인라인 값을 비교하여 특성을 설정할 수 있어야합니다. 시도해보십시오.

[attr.checked]="section.default == content.id ? 'checked' : null" 
+0

아, 나는 그것을 시도했지만 아주 똑똑한 사람처럼 내 코드에 뭔가 다른 것이 있었음에 틀림 없다. – davimusprime

관련 문제