javascript - 在 Angular 7 的 ngFor 中有条件地禁用按钮

Question

我试图禁用已登录用户投票的按钮，但是，当我在 ngFor 中使用 disabled 指令时(在下面的示例中)，所有按钮都被禁用，而不仅仅是包含已登录用户的项目在用户。我的目标是检查数组是否包含当前用户的 uid，如果包含则禁用该按钮。我怎样才能做到这一点？提前致谢

组件.ts:

this.itemsCollection = this.afs.collection('food', ref => ref.orderBy('voteCount', 'desc'));
          this.items = this.itemsCollection.snapshotChanges().pipe(
            map(actions => actions.map(a => {
              const data = a.payload.doc.data();
              const id = a.payload.doc.id;
                  this.afAuth.authState.subscribe(user => {
                    if(user) {
                       this.user = user.uid;
                        if (data.votedBy.includes(user.uid)){
                         console.log(id);
                         console.log('you already voted');
                         this.disabledButton = true;
                         return false;
                              }
                    else {
                        this.disabledButton = false;
                         }
                }
                });
              return { id, ...data };
            }))
          );

HTML:

<div class="firestoreLoop" *ngFor="let item of items | async" >
        <div class="container1">
            <div class="card">
                <div class="card-body">
                <p>{{item.voteCount}}</p>
                <p>{{item.id}}</p>
                <p>{{item.votedBy}}</p>
                <p>{{user}}</p>
                </div>
            <button type="button" id="item.id" class="btn"(click)="upvote(item.id)" [disabled]="disabledButton">Upvote</button>
            </div>
        </div>
    </div>

编辑:我通过向按钮添加 *ngIf= "user != item.votedBy" 得到了想要的结果。感谢先生的帮助。

Answer 1

最好的方法是将 disabledButton 添加为 items 数组中 item 的 property， 然后 button 上的 [disabled] 应该是 [disabled]="item.disabledButton"。

然后您可以通过简单地识别用户并将其相应的 item disabledButton 属性设置为 来控制应该禁用的项目真 否则假