角度：如何更改* 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文件

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>

Answer 2

在您的.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;
}