Angular: как изменить изображение в определенной строке таблицы, созданной в цикле * ngFor

Question

Итак, у меня есть сгенерированная таблицей ngFor. В каждой строке у меня есть кнопка с изображением в качестве фона:

    <tbody>
      <tr *ngFor='let movie of movies let i = index'>
        <td>...some values here...</td>
        <td>
          <span>
            <button name="watchLater_butom">
              <img [src]='watchLaterIcon' alt="icon (click)='AddToWatchLater(i)'> 
            </button>
          </span>
       </td>
    </tbody>

И мой компонент:

export class MyComponent{
    watchLaterIcon: string = '/assets/watchLater_icon.png';
    emptyWatchLaterIcon: string = '/assets/emptyWatchLater_icon.png';

    AddToWatchLater(i : number) : void {
        var tempWatchLaterIcon = this.watchLaterIcon;
        this.watchLaterIcon = this.emptyWatchLaterIcon;
        this.emptyWatchLaterIcon = tempWatchLaterIcon;
    }
}

К настоящему времени все изображения изменяются нажатием любой кнопки. Что мне нужно, это изменить только один src изображения для кнопки, которую я нажал.

Полагаю, что-то должно быть сделано в методе AddToWatchLater(). Я предполагаю, что это может работать через индекс строки, которую я передаю методу, но понятия не имею, как он работает.

Answer 1

В вашем файле .ts сначала создайте новый массив, каждый элемент этого массива будет иметь строку watchLaterIcon, а его длина должна быть такой же, как у массива movies, поэтому добавьте цикл for в конструктор:

imageSources: string[] = [];

constructor() 
{  
   for(let i=0; i<this.movies.length; i++)
   {
      this.imageSources[i] = watchLaterIcon;
   }
}

Затем создайте новый компонент для кнопки «ButtonComponent» и отредактируйте файл .html, чтобы ngFor перебирал компонент кнопки и передавал источники изображений в качестве входных данных для компонента:

<table>
    <tbody>
        <tr *ngFor='let imageSource of imageSources>
            <td>...some values here...</td>
            <td>
                <span>
                  <app-button [inputImageSrc]="imageSource"><app-button>    
                </span>
            </td>
        </tr>
      </tbody>
</table>

Компонент кнопки .HTML-файл:

<button (click)="getSelected()">
  <img src={{imgSrc}} alt="icon"> 
</button>

Компонент кнопки .Ts файл:

emptyWatchLaterIcon: string = '/assets/emptyWatchLater_icon.png';

@Input('inputImageSrc') imgSrc: string; // get input and use as 'src' in the img tag

getSelected() // Change the image source, applies only to the clicked button of the ngFor loop.
{
  this.imgSrc = emptyWatchLaterIcon;
}

Answer 2

Вы можете динамически изменять в зависимости от положения данных массива, управляющих им в объекте на фильм, краткий пример:

Ts файл

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  watchLaterIcon: string = 'https://www.materialui.co/materialIcons/action/watch_later_black_192x192.png';
  emptyWatchLaterIcon: string = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT53nVsfr2bXkVsrEZ8Mjsbwk4-dQzfPL1XuVWNPVy5Ex52AQAM';
  movies:{} = [{ name: 'Movie 1' }, { name: 'Movie 2' }]
  AddToWatchLater(index){
    const actualsrc = this.movies[index].src;
    if(actualsrc){
      this.movies[index].src = actualsrc === this.watchLaterIcon ? this.emptyWatchLaterIcon : this.watchLaterIcon;
    }else {
      this.movies[index].src = this.emptyWatchLaterIcon;
    }
  }
}

HTML-файл:

<table>
    <tbody>
        <tr *ngFor='let movie of movies let i = index'>
            <td>...some values here...</td>
            <td>
                <span>
                    <button name="watchLater_butom">
                        <img [src]="movie.src ? movie.src : watchLaterIcon" alt="icon" (click)="AddToWatchLater(i)" > 
                    </button>
                  </span>
            </td>
        </tr>
      </tbody>
</table>