Ионные шоу данные, которые равны значению

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

}

ваш-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>