变量分布在相同的组件中

Question

我通过迭代 meeting-edit 组件中的主题变量来创建主题组件。

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

如您所见，默认情况下 show 变量为 false。单击输入元素时，它应该切换将显示#content div 的显示变量。但是当单击每个组件的输入元素时会出现奇怪的行为。仅切换第一个主题组件的变量显示。就像每个主题组件都使用相同的变量一样。为什么会这样？请帮忙解决这个问题。这似乎是一个错误。

Answer 1

我认为问题出在 #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>

Answer 2

解决了这个问题。这是因为输入文件类型元素。我只是将 (click)="this.show = !this.show" 移动到标签元素，它已解决。奇怪但它奏效了。我认为这是 Angular.

的错误

变量分布在相同的组件中

Variable is distributed among same components

javascript

angular2-directives

angular2-template

angular