각도 4 지시어는 다음과 같이

Question

내가 그래서이 지침을 만들었다 각 지시문 새로 온 값

bonusJson = [{ 
    bonus:1500, 
    amount:2000 
    },{ 
    bonus:1000, 
    amount:1000 
    },{ 
    bonus:500, 
    amount:500 
    },{ 
    bonus:0, 
    amount:100 
    }]; 
    activeBonus = 0; 

그러나보기가 제대로 렌더링되지 않습니다 변수가 다음과 같이 정의된다

<div class="column col-3" *ngFor="let b of bonusJson;let i = index" bonusCard [bonus]="b.bonus" [amount]="b.amount" [isSeleted]="i==activeBonus"></div> 

아래 그림과 같이 undefind이 표시됩니다.

$

Answer 1

당신이 생성자에서 코드를 실행하고 있지만 생성자가 Input의이 연결되어 그 전에 실행됩니다.

그래서, 당신은 this.bonus, this.amount 및 this.isSelected을 찾습니다하지만 상위 구성 요소의 전망은 아직 분석되지 않고 입력 proprierites가 여전히 바인딩되지 않습니다 getTemplate() 전화, 그래서 당신은 대신 undefined을받을 수 있습니다.

는이 문제를 방지하려면 ngOnInit 후크에 생성자에서 코드를 이동합니다.

export class BonusCard implements OnInit { 
    @Input() bonus: string; 
    @Input() amount: string; 
    @Input() isSeleted: string; 

    constructor(private el: ElementRef) {} 

    ngOnInit() { 
    this.el.nativeElement.innerHTML = this.getTemplate() 
    } 

PS : 당신은 여러 줄에 템플릿을 작성하는 역 따옴표 (`)와 템플릿 문자열을 사용할 수 있으며 동일한 유형의 두 변수를 비교하는 경우는 === 대신 ==를 사용할 수 있습니다

[isSeleted]="i===activeBonus" 

을

및

return `<div> 
      <div class="bonus"> ${this.bonus} </div> 
      <div class="amount"> ${this.amount} </div> 
      <div class="radio ${this.isSeleted?'is_seleted':''}"></div> 
     </div>`;