Как изменить изображения динамически внутри для цикла в angular6?

Question

Мой HTML-код:

          <div class="row">
        <div class="col-xs-6 col-sm-6 col-md-4 col-lg-12">
           <ng-container *ngFor="let horizontal of categories">
            <ng-container *ngFor="let horizontalval of horizontal.items;let i=index">
          <button [ngClass]="{'selected-color' : i==selectedIndex}" type="submit" class="btn1" [id]="horizontal.items[i].title" (click)="changeTrans(horizontal.items[i].title);changeColor(i)"> 
            <img [src]= horizontal.items[i].icon alt="image not found" class="icon"/>
            {{ horizontal.items[i].title }}
          </button>
        </ng-container>
      </ng-container></div>
      </div>

Итак, мой файл component.ts,

 changeColor(i){
  console.log(i);
this.selectedIndex = i;
}

мой css:

.selected-color{
 background-color: orange;
 color:white;
// background-image: url('./../../../../../assets/Trans_1.png');
}

Так что я могуизменить цвет выбранной кнопки, но мне также нужно изменить разные изображения для разных значений.Здесь, как я могу динамически изменить свое изображение для каждого идентификатора кнопки?

По сути, я хочу знать, как динамически изменять изображение для каждой кнопки, для которой будет отображаться кнопка.Кто-нибудь может предложить мне что-то для этого?

Answer 1

Заменить код ниже

<ng-container *ngFor="let horizontalval of horizontal.items;let i=index">

от

<img [attr.src]= "horizontalval.icon" alt="image not found" class="icon"/>

Edit

Примечание: объект horizontalval должен иметь атрибут icon, который будет иметь path из image.

Если вы хотите изменить путь для всего изображения, вы можете использовать selectedIndex.

<img [src]= "horizontal.items[selectedIndex].icon" class="icon"/>

Редактировать

    <button [ngClass]="{'selected-color' : horizontal.items[i].selected}" 
      type="submit" class="btn1" [id]="horizontal.items[i].title"
 (click)="changeTrans(horizontal.items[i].title);
         changeColor(horizontal.items[i])">        
       <img [src]= horizontal.items[i].icon alt="image not found" class="icon"/>
                {{ horizontal.items[i].title }}
      </button>

ц

changeColor(item){
  this.item.selected = true;
}