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; 
   });
  }

Answer 2

我在这里看到的是您正在获取值this.upcoming

中的所有数据

所以您要做的只是添加以下内容：

<ion-card class="box" style="background-color: white" *ngIf="y.event == 'upcoming'">
  YOUR CODE
</ion-card>

Answer 3

我建议您编写一个管道来过滤即将发生的事件。可能会有一个用例，您需要操纵整个事件。因此，为了安全起见，您可以使用管道进行过滤，而不是使用ngIf或在组件中进行过滤。

events.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'events'
})
export class EventsPipe implements PipeTransform {



  transform(events: Array<any>,type:string): Array<any> {
    if(!type)
      return events;
    return events.filter(event=>event['event'] == type);
  }

}

your-component.html

<!-- Upcoming -->
<ion-slide class="slide" *ngFor="let y of upcoming | events:'upcoming'" (click)='details(y)'>

<!-- Past -->
<ion-slide class="slide" *ngFor="let y of upcoming | events:'past'" (click)='details(y)'>

Answer 4

尝试使用ng-conatiner和ngIf，这将防止在事件即将到来时添加ion-slide compoenet

<ng-conainer *ngFor="let y of upcoming" >
<ion-slide class="slide" (click)='details(y)' *ngIf="y.event == 'upcoming'">  
  <ion-card class="box" style="background-color: white">
   ....
  </ion-card>
</ion-slide>
</ng-container>

离子显示数据等于该值

4 个答案: