각도 4에 * ng에 변수 연결

Question

루프를 *ngFor 루프에 어떻게 첨부합니까?

다음은 작동하지만 내 배열 <listInstruction>에 두 개 이상의 항목이있는 경우 루프는 두 개의 을 생성합니다. 그게 논리이지만, 은 모두 .divTest에서 동일합니다. 각각 에 두 개의 다른 범위 myLocalVariable이 필요합니다.

<div *ngFor="let instruction of listInstruction; let i = index; let myLocalVariable=false"> 
    <div class="divTest" (click)="myLocalVariable=!myLocalVariable">Click here</div> 
</div> 

어떻게하면됩니까? 고마워요 :)

Answer 1

필자는 myLocalVariable을 실제로 템플릿에 저장하지 않고 구성 요소에 저장한다고 생각합니다.

아마 이런 짓을 할 것이다 :

구성 요소 :

state; 

ngOnInit() { 
    state = { myLocalVariables: [] }; 
    for(var i = 0; i < listInstruction.length; i++){ 
    state.myLocalVariables.push(false); 
    } 
} 

템플릿 : myLocalVarible에서 온 곳

<div *ngFor="let instruction of listInstruction; let i = index;"> 
    <div class="divTest"  (click)="state.myLocalVariables[i]=!state.myLocalVariables[i]">Click here</div> 
</div>