离子显示数据等于该值

Question

我正在使用ngFor滑动项目。但是我需要证明那些只有事件价值即将到来的项目。

我只需要显示具有事件值活动状态的数组即可。谢谢

<ion-slide class="slide" *ngFor="let y of upcoming" (click)='details(y)'>
  <ion-card class="box" style="background-color: white">
    <img  [src]="y.picture1" class="image"/>
       <div class="row">
          <div class="column1" style="background-color: white">
              <h3> {{y.days}} Days</h3>
          </div>

           <div class="column2" style="background-color: white">
              <div class="tourdescription">{{y.title}}</div>
              <div class="tourdate">{{y.date}}</div>
           </div>    
       </div>
  </ion-card>
</ion-slide>

.ts

  getUpcoming(){
    this.authService.getUpcoming().pipe(
    map(actions => actions.map(a => {
    const data = a.payload.doc.data();
    const id = a.payload.doc.id;

     return { id, ...data };
     }))
   ).subscribe(resp=>{
   console.log(resp);
   this.upcoming = resp; 
   });
  }

Answer 1

尝试这个

  getUpcoming(){
    this.authService.getUpcoming().pipe(
    map(actions => actions.map(a => {
    const data = a.payload.doc.data();
    const id = a.payload.doc.id;

     return { id, ...data };
     }))
   ).subscribe(resp=>{
       console.log(resp);
       this.upcoming = resp.filter(item => item.event === 'upcoming'); 
   });
  }

使用RXJS操作

  import { filter } from 'rxjs/operations'

  getUpcoming(){
    this.authService.getUpcoming().pipe(
    map(actions => actions.map(a => {
    const data = a.payload.doc.data();
    const id = a.payload.doc.id;

     return { id, ...data };
     }))
   ).pipe(
      filter(item.event === 'upcoming') 
   )
    .subscribe(resp=>{
       console.log(resp);
       this.upcoming = resp; 
   });
  }