2016-10-25 3 views
1

구성 요소에 Angular2 및 부트 스트랩을 사용하고 있습니다. * ngFor 루프의 테스트 "2"속성이 newTest라는 가져온 변수와 같은 경우 tr 태그에 클래스를 추가하려고합니다. 하지만 클래스를 추가하지 않습니다.각도 2 - * ngFor 조건부 클래스

여기 내 구성 요소의 : 테이블은 올바르게 표시됩니다

loadTest() { 
     this.testService.getTests() 
     .then((data) => { 
      this.tests = data 
     }) 
    } 

ngOnInit() { 
     this.loadTest(); 
    } 

하지만 클래스는 없다.

물론 조건이 완전히 채워집니다. 내가 다른 뭔가 잘못하고

<div class="table-responsive"> 
    <table class="table table-hover table-reflow"> 
     <thead> 
      <tr> 
       <th>1</th> 
       <th>2</th> 
       <th>3</th> 
       <th>4</th> 
       <th>5</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr *ngFor="let test of tests" [class.newDevice]="test.2 === this.newTest" [attr.class]="test.1" > 
       <th>{{test.1}}</th> 
       <th>{{test.2}}</th> 
       <th>{{test.3}}</th> 
       <th>{{test.4}}</th> 
       <th>{{test.5}}</th> 
      </tr> 
     </tbody> 
    </table> 
</div> 

암 :

여기 내 HTML입니까? 나도 jQuery로 동일한 달성을 시도했다 :

loadTest() { 
      this.testService.getTests() 
      .then((data) => { 
       this.tests = data 
    if (NewTest.length !== undefined) { 
        let index = this.tests.findIndex((e) => { return e.2 === NewTest }) 
        let test = this.tests[index].id 
        jQuery(test).addClass("newDevice"); 
       } 
      }) 
     ) 
+0

왜 [[class.newDevice]]와 [[attr.class]'가 있습니까? 이 두 가지가 서로 무시하지 않습니까? – martin

+1

AFAIK'attr.class'는 피해야합니다 (예 : Safari 모바일에서 문제가 발생 함). 대신에 [[ngClass]'를 사용하십시오. –

+0

이걸 시도해 주실 수 있니 :'[ngClass] = "{ 'newDevice': test.2 == newTest}"'? – rinukkusu

답변

3

[class.newDevice][attr.class] 서로를 무시한다.