Variable ist auf die gleichen Komponenten verteilt

Question

Ich erstelle eine Topic-Komponente durch Iterieren über Themen Variable in Meeting-Edit-Komponente.

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

Der TS-Code von Topic Komponente:

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

und Vorlage:

<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> 

Wie Sie standardmäßig sehen zeigen Variable falsch ist. Wenn auf das Eingabeelement geklickt wird, sollte es die Show-Variable umschalten, die #content div anzeigen würde. Beim Klicken auf das Eingabeelement jeder Komponente tritt jedoch merkwürdiges Verhalten auf. Nur die Variable show der ersten Topic-Komponente wird umgeschaltet. Es ist so, dass jede Themenkomponente dieselbe Variable verwendet. Warum das passiert? bitte helfen Sie das zu lösen. Es scheint ein Fehler zu sein.

Answer 1

Dieses Problem wurde behoben. Es war wegen Eingabedatentyp Element. Ich habe gerade (click)="this.show = !this.show" auf Label-Element verschoben und es ist gelöst. Seltsam, aber es hat funktioniert. Ich denke, es ist ein Bug von Angular.

Answer 2

Ich denke, das Problem in #content ist, wenn show == true sie die Eingabe gesucht, die #content und zeigen es enthält, und da nimmt es die erste so Ihre erste div, die jedes Mal, wenn Sie auf den Eingang klicken gezeigt:

<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>