ngIf - else 进入 ngFor Angular Firestore 数组对象

Question

我有一个名为 users 的 firestore 集合，其中有一个对象数组 studyList，我在其中添加了用户购买的文档。

我想做的是：当用户点击一个文档来检查该文档是否已经在他的 studyList 中时，如果要显示 "OWNED"，如果不显示购买按钮。

那是我的 HTML ngFor 代码：

<div *ngFor="let document of user.studyList; index as i">
    <div *ngIf="document.id == documentId; else noOwn">
        <div class="col-md-2">
            <button class="btn btn-large" [disabled]="true">Owned</button>
        </div>
    </div>
    <ng-template #noOwn>
        <div class="col-md-2">
            <button class="btn btn-large" (click)="addToStudyList(user)">Buy</button>
        </div>
    </ng-template>
</div>

购买按钮显示条件为假的次数（studyList 中其他文档的数量），如下所示：

我想要的是只显示一次 'OWNED' 或“购买”按钮。你能帮助我吗？非常感谢！

Answer 1

将 *ngFor 放在第二个 div 你应该没问题

<div>
 <div *ngFor="let document of user.studyList; index as i">
   <div *ngIf="document.id == documentId; else noOwn">
     <div class="col-md-2">
       <button class="btn btn-large" [disabled]="true">Owned</button>
     </div>
   </div>
 </div>
 <ng-template #noOwn>
  <div class="col-md-2">
   <button class="btn btn-large" (click)="addToStudyList(user)">Buy</button>
  </div>
 </ng-template>
</div>

ngIf - else 进入 ngFor Angular Firestore 数组对象

ngIf - else into ngFor Angular Firestore Array Objects

angular

firebase

ngfor

angular-ng-if