在 Angular 中禁用 ngFor 中的一个按钮

Question

I have an add to list button in my component, that disables when a user clicks it once. Problem is when the user clicks the button next to the list item they want to add, it disable all the other list buttons also? I only want it to disable the one selected. My code so far is:

component.html

<div *ngFor="let itunes of data | paginate: { itemsPerPage: 10, currentPage: p } | filter:filter; let i = index">
    <div class="row">
      <div class="col-lg-2 col-md-2 col-sm-12">
        <img class="align-self-start mr-5 mb-5 artwork" src="{{itunes.artworkUrl100}}" alt="image">
      </div>
      <div class="col-md-8 col-lg-8 col-sm-12">
        <h2 class="mt-0 d-inline-block text-truncate trunc">{{itunes.collectionName}}</h2>
        <h4 class="mt-0 mb-3">{{itunes.artistName}}</h4>
        <h5 class="mt-0 mb-3"><a href="{{itunes.collectionViewUrl}}" target="_blank">Listen</a></h5>
      </div>
      <div class="col-md-2 mb-5 col-lg-2 col-sm-12">
        <a target="_blank"><button type="button" class="btn btn-primary btn-lg float-right"
            (click)="addSongToPlaylist(itunes); clicked = true;" [disabled]="clicked">
            <fa-icon [icon]="faPlus">
            </fa-icon>
          </button></a>
      </div>
    </div>
  </div>

component.ts (Add function)

  addSongToPlaylist(itunes) {
    this.list.playlist.push(Object.assign({}, itunes));
    this.list.savePlaylist();
    console.log('Playlist - ', this.list.playlist);
  }

Any ideas, what I am doing wrong?

Answer 1

You have only one clicked property and all buttons have their disabled property bound to that property. That is why they are all enabled or disabled at the same time.

The simplest solution is to add a clicked property to the Itunes class, and modify its value when the button is clicked:

(click)="addSongToPlaylist(itunes); itunes.clicked = true;" [disabled]="itunes.clicked"

An alternative is to store the clicked value in a separate array, where each array item refers to an item of the data array.

Answer 2

Maybe do this:

<button type="button" class="btn btn-primary btn-lg float-right"
            (click)="addSongToPlaylist(itunes); clicked = i;" [disabled]="clicked===i">
            <fa-icon [icon]="faPlus">
            </fa-icon>
          </button>