在Angular中使用Observable数组时如何在模板中显示数据答案

【问题标题】：how to display data in template when using Observable array in Angular在Angular中使用Observable数组时如何在模板中显示数据
【发布时间】：2018-06-29 05:17:49
【问题描述】：

我的问题是，如果过滤后的 observable 不返回任何数据，我如何在模板中显示数据。如果满足过滤条件，下面显示的 observable 将从 firebase 实时数据库中检索数据。它在获取数据时起作用。我需要的是在可观察对象不返回数据时显示数据。我已经在我想要显示的数据下方发表了评论。谢谢

Eventdata: Observable<any[]>;

this.Eventdata = this.upSvc.getUserEvents(this.authentication.currentUserId)
  .map(items => items.filter(item => item.eventId == this.eventId))
  .filter(items => items && items.length > 0);
  console.log(this.Eventdata);

 <div *ngIf="Eventdata === undefined;else dataAfterValue;">
  <div *ngFor="let item of Eventdata | async"> 
     <button type="button" [disabled]="item.attending" 
        (click)="AttendEvent(evenDetails.EventId)" class="btn btn-primary 
        font-weight-light ">
       {{item.attending? 'Already Registered' : 'Register'}} 
       <i class="fa fa-check" aria-hidden="true"></i>
     </button>

     <button type="button" *ngIf="item.attending"  
        (click)="AttendEvent(evenDetails.EventId)" class="btn btn-danger 
        font-weight-light ">
        Cancel Attendance
        <i class="fa fa-check" aria-hidden="true"></i>
     </button> 
     <button type="button"   (click)="shareEvent()" class="btn btn-info 
        font-weight-light ">
        Share
        <i class="fa fa-share-alt" aria-hidden="true"></i>
     </button>
     <button type="button"  [disabled]="item.bookmarked" 
       (click)="bookmarkEvent(evenDetails.EventId)" class="btn btn-warning 
       font-weight-light ">
       {{item.bookmarked? 'Already Bookmarked' : 'Bookmark'}} 
       <i class="fa fa-bookmark" aria-hidden="true"></i>
     </button>       
</div>
</div>

--- Data to SHOW ---------------
<ng-template #dataAfterValue>
<div>
   <button type="button"   (click)="AttendEvent(evenDetails.EventId)" 
      class="btn btn-primary font-weight-light ">
      Register
      <i class="fa fa-check" aria-hidden="true"></i>
   </button>
   <button type="button"   (click)="shareEvent()" class="btn btn-info font-
      weight-light ">
      Share
      <i class="fa fa-share-alt" aria-hidden="true"></i>
   </button>
   <button type="button"   (click)="bookmarkEvent(evenDetails.EventId)" 
       class="btn btn-warning font-weight-light ">
       Bookmark 
       <i class="fa fa-bookmark" aria-hidden="true"></i>
   </button>
</div>
</ng-template>

【问题讨论】：

标签： javascript angular typescript firebase observable

【解决方案1】：

这可以在Angular中使用ngIf-else来实现，如下所示，

<ng-template #dataAfterValue>
    <!-- Content to be showed if there is data -->
    <!-----------your actual code ---------->
</ng-template>

<div *ngIf="Eventdata === undefined;else dataAfterValue;">
    <!-- Content to be showed if there is no data -->
    <!-----------your commented code ---------->
</div>

【讨论】：

我刚刚尝试了建议的代码，总是返回 false。
可以添加Eventdata属性的声明语句

【解决方案2】：

试试这个

<ng-container *ngIf="Eventdata|async; let EventItems; else dataAfterValue">
    <div *ngFor="let item of EventItems">
       {{item | json}}
    </div>
</ng-container>
<ng-template #dataAfterValue>No results...</ng-template>

#dataAfterValue 将在 Eventdata 返回 null 时显示

【讨论】：