変数が同じコンポーネントに分散されています

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変数を切り替える必要があります。しかし、各コンポーネントの入力要素をクリックすると、奇妙な動作が発生します。最初のトピックコンポーネントの変数showのみがトグルされます。それは、すべてのトピックコンポーネントが同じ変数を使用するようなものです。それはなぜ起こるのですか？これを解決するのを助けてください。それはバグのようです。

Answer 1

この問題を解決しました。それは入力ファイルタイプの要素のためです。 (click)="this.show = !this.show"をlabel要素に移動しましたが、解決されました。奇妙だが、それは働いた。私はAngularのバグだと思う。

Answer 2

私はそれが#contentが含まれているし、それを表示し、入力を検索するときshow == true問題は、#contentであると思うし、それはあなたが入力をクリック毎回示すdivので、あなたの最初の最初の1かかるので：

を

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