변수가 동일한 구성 요소에 분산되어 있습니다.

Question

미팅 편집 구성 요소의 변수를 반복하여 주제 구성 요소를 만듭니다.

<app-topic *ngFor="let topic of topics" 
       [topic]="topic" 
    > 
    </app-topic> 

주제 구성 요소의 TS 코드 :

@Input('topic') topic: Topic; 
    show = false; 
    constructor() { } 
    ngOnInit() { 
    } 

및 템플릿 :

<div class="topic"> 
    <p style="padding: 10px 0">{{topic.name}}</p> 
    <label for="upload-photo" style="cursor: pointer">Fayl</label> 
    <input type="file" class="inputFile" id="upload-photo" (click)="this.show = !this.show" > 
    <div #content style="height: 200px;width: 200px " *ngIf="show"></div> 
</div> 

기본적 에서 보듯이

는 변수가 false 보여줍니다. 입력 요소가 클릭되면 #content div를 표시하는 show 변수를 토글해야합니다. 그러나 각 구성 요소의 입력 요소를 클릭하면 이상한 동작이 발생합니다. 첫 번째 주제 구성 요소의 변수 표시 만 토글됩니다. 모든 주제 구성 요소가 동일한 변수를 사용하는 것과 같습니다. 왜 그런가? 이 문제를 해결하는 데 도움주세요. 그것은 버그 같다.

Answer 1

이 문제가 해결되었습니다. 입력 파일 유형 요소 때문입니다. 방금 ​​(click)="this.show = !this.show"을 레이블 요소로 이동했으나 해결되었습니다. 이상하지만 작동했습니다. 나는 Angular의 버그라고 생각합니다.

Answer 2

나는 #content를 포함하고 보여 입력을 검색 할 때 show == true 문제가, #content의 생각, 그것을 당신이 입력을 클릭 매번 표시 div 그래서 첫 번째 첫 번째 걸리므 :

을

<div class="topic"> 
    <p style="padding: 10px 0">{{topic.name}}</p> 
    <label for="upload-photo" style="cursor: pointer">Fayl</label> 
    <input type="file" class="inputFile" id="upload-photo" (click)="this.show = !this.show" > 
    <div style="height: 200px;width: 200px " *ngIf="show"></div> 
</div>