Question

我的问题是如果过滤后的observable没有返回任何数据，我如何在模板中显示数据。如果满足过滤条件，下面显示的observable将从firebase实时数据库中检索数据。它在获取数据时有效。我需要的是在observable不返回数据时显示数据。我在下面评论了我想要展示的数据。谢谢

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>

Answer 1

试试这个

<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

时显示

Answer 2

这可以使用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>

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

2 个答案: