Javascript 角2+中的JS；仅影响一个组件，而不影响每个组件

我有一个角度2+应用程序，可以选择图像并在预览中查看它的外观。。问题是我在父HTML中有3个组件，它们可以做相同的工作，并且包含相同的JS脚本，只影响第一个组件。代码如下所示

父HTML：

<div class="form-inline">
                <app-advert-photo-element id="first" [photoNumber]="1"></app-advert-photo-element>
                <app-advert-photo-element id="second" [photoNumber]="2"></app-advert-photo-element>
                <app-advert-photo-element id="third" [photoNumber]="3"></app-advert-photo-element>
</div>

请帮帮我。我找不到解决办法。。。 转载：

正如我所看到的，问题在于CSS。。如果没有我的CSS，它可以正常工作

现在我看到了这个问题

每个组件实例都呈现

。由于每个输入都有相同的id“photo”，因此

仅指具有该id的第一个输入

这是正在发生的事情的演示。尝试单击每个标签并查看哪个输入得到关注：

#输入的标签
#输入的标签
#输入1的标签
#输入2的标签

现在我看到了问题所在

每个组件实例都呈现

。由于每个输入都有相同的id“photo”，因此

仅指具有该id的第一个输入

这是正在发生的事情的演示。尝试单击每个标签并查看哪个输入得到关注：

#输入的标签
#输入的标签
#输入1的标签
#输入2的标签

你能在这次stackblitz上重现这个问题吗@AlexK我在AdvertPhotoElementComponent中添加了一些CSS。谢谢大家的关注。链接已添加到主邮局。您是否可以在此次stackblitz上重现该问题@AlexK我在AdvertPhotoElementComponent中添加了一些CSS。谢谢大家的关注。链接添加在主帖子中

<div class="polaroid">
  <label for="photo" class="cursor-pointer">
    <img [src]="url" class="img-fluid" alt="">
  </label>
  <div class="img-title-bot">
    Nr {{photoNumber}}.
  </div>
  <input type="file" id="photo" (change)="onSelectFile($event)">
</div>

export class AdvertPhotoElementComponent implements OnInit {

  @Input()
  protected photoNumber;

  protected url = '';

  constructor() {
  }

  ngOnInit() {
  }

  onSelectFile(event: any) {
    if (event.target.files && event.target.files[0]) {
      const reader = new FileReader();

      reader.onload = (onLoadEvent: any) => {
        this.url = onLoadEvent.target.result;
      };

      reader.readAsDataURL(event.target.files[0]);
    }
  }
}