角2+中的JS只影响一个分量，而不影响每个分量。
角2+中的JS只影响一个分量，而不影响每个分量。
提问于 2018-11-14 20:38:58
我有一个角度的2+应用程序，可以选择图像并查看它在预览中的外观。问题是，我在父HTML中有3个组件，它们可以完成相同的工作，并且包含相同的JS脚本，只影响第一个组件。代码如下所示。这是Gif，它展示了它是如何工作的。
父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>应用程序-广告-图片元素HTML：
<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>应用广告-照片元素.app：
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]);
}
}
}请帮帮我。我找不到解决办法..。转载：https://stackblitz.com/edit/angular-h4df6q
正如我所看到的，问题就在CSS中。如果没有我的CSS，它就能正常工作。
Stack Overflow用户
回答已采纳
发布于 2018-11-15 17:31:52
现在我明白了问题所在。
每个组件实例呈现<input id="photo">。因为每个输入都有相同的id“照片”，所以<label for="photo">只引用该id的第一个输入。
这是正在发生的事情的演示。试着点击每个标签，看看哪些输入得到了焦点：
<div>
<label for="input">Label for #input</label>
<input id="input" />
</div>
<div>
<label for="input">Label for #input</label>
<input id="input" />
</div>
<div>
<label for="input1">Label for #input1</label>
<input id="input1" />
</div>
<div>
<label for="input2">Label for #input 2</label>
<input id="input2" />
</div>
要解决这个问题，请给每个输入一个唯一的id，并将相同的id传递给相应的标签：
<div class="polaroid">
<label for="photo{{photoNumber}}" class="cursor-pointer">
<img [src]="url" class="img-fluid" alt="">
</label>
<div class="img-title-bot">
Nr {{photoNumber}}.
</div>
<input type="file" id="photo{{photoNumber}}" (change)="onSelectFile($event)">
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53308387
复制相关文章
相似问题
腾讯云开发者
