Zrobiłem sobie w aplikacji angular 2+ preview ładowania zdjęć.. wstawiłem to w komponent i powieliłem 3 razy.. jak klikam na element 1, 2 lub 3 to działanie jest takie samo. Mianowicie: ładuje mi zdjęcie tylko do pierwszego komponentu( krótki gif w załączniku). Czym to jest spowodowane i jak to naprawić? Kod poniżej
parent HTML:
<div class="form-inline">
<app-advert-photo-element [photoNumber]="1"></app-advert-photo-element>
<app-advert-photo-element [photoNumber]="2"></app-advert-photo-element>
<app-advert-photo-element [photoNumber]="3"></app-advert-photo-element>
</div>
app-advert-photo-element 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-advert-photo-element TS:
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]);
}
}
}