CODEWITHSUNDEEP
javascripthtmlangular
MacD
MacD

Reputation: 586

Conditionally disable button in ngFor in Angular 7

I am trying to disable buttons that the logged in user have voted on, however, when I use the disabled directive inside my ngFor (in the example below) all of the buttons are disabled, not just the items that include the logged in user. My goal is to check to see if an array contains the current user's uid, if so disable the button. How can I achieve this? Thanks in advance

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

Edit: I got the desired result by adding *ngIf= "user != item.votedBy" to the button. Thanks for the help gentleman.

Upvotes: 2

Views: 2131

Answers (1)

manish
manish

Reputation: 1458

best way for you is to add disabledButton as a property of item in items array, and then the [disabled] on the button should be [disabled]="item.disabledButton".

And then you can control which item should be disabled by simply identifying the user and setting its corresponding item's disabledButton property to true otherwise false

Upvotes: 1

Related Questions