Условно отключить кнопку в ngFor в Angular 7

Question

Я пытаюсь отключить кнопки, за которые проголосовал вошедший в систему пользователь, однако, когда я использую директиву disabled внутри моего ngFor (в приведенном ниже примере), отключаются все кнопки, а не только элементы, которые включают в себя зарегистрированныйв пользователя.Моя цель состоит в том, чтобы проверить, содержит ли массив текущий пользовательский uid, если это так, отключите кнопку.Как мне этого добиться?Заранее спасибо

componenttent.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 в виде property из item в items массив, и тогда [disabled] на button должно быть [disabled]="item.disabledButton".

И затем вы можете контролировать, какой элемент должен быть disabled, просто идентифицируя пользователя и устанавливая его соответствующее свойство item's disabledButton на true в противном случае false