Как исправить дублирование название файлов?

Question

[olya_097]

загружаю картинку "test.jpg"
В размете появится div
<div><img src="test.jpg"></div>

Если потом загрузить test2.jpg
то будет

<div><img src="test2.jpg"></div>
<div><img src="test2.jpg"></div>

Первая картинка потерялась + появилось дублирование. Как это исправить?

https://stackblitz.com/edit/angular-hello-world-bv...

Answer 1

[Yuriy Vorobyov]

У вас есть переменная fileName, которая изменяется при загрузке изображения
Каждый раз загружая изображения вы сталкиваетесь с тем, что переписываете значение конкретно этой переменной

Сейчас у вас идет жесткая привязка к fileName:

<div *ngFor="let file of files">
  <img [src]="fileName" />
</div>

Измените верстку и сделайте привязку на имя конкретного обрабатываемого файла:

<div *ngFor="let file of files">
  <img [src]="file.name" />
</div>