javascript - 在 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 属性绑定(bind)到该属性。这就是为什么它们同时启用或禁用的原因。

最简单的解决方案是向 Itunes 类添加一个 clicked 属性，并在单击按钮时修改其值:

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

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