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

Question

我的组件中有一个添加到列表按钮，当用户单击它一次时会禁用该按钮。 问题是当用户单击他们想要添加的列表项旁边的按钮时，它也会禁用所有其他列表按钮吗？ 我只希望它禁用所选的那个。 到目前为止我的代码是：

组件.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 （添加功能）

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

任何想法，我做错了什么？

Answer 1

您只有一个clicked属性，并且所有按钮都将其disabled属性绑定到该属性。 这就是为什么它们都同时启用或禁用的原因。

最简单的解决方法是在Itunes类中添加一个clicked属性，并在按钮被点击时修改其值：

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

另一种方法是将clicked值存储在单独的数组中，其中每个数组项都引用数据数组中的一项。

Answer 2

也许这样做：

<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>