Ionic show data which is equal to the value

Question

Im using ngFor for sliding items. But i need to show that items only which have event value upcoming.

I need to only show that array which have the event value active. Thanks


  
    
       
          
               {{y.days}} Days
          

           
              {{y.title}}
              {{y.date}}

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

user_9152764 · Answer

Try this

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

with RXJS Operation

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

user_11552516 · Answer

What I see here is that you are getting all the data in the value this.upcoming

So what you have to do is simply add something like this :


  YOUR CODE

user_11543102 · Answer

I suggest you write a pipe to filter the events which are upcoming.May be there will be a use case, where you need to manipluate the entire events. So to play on safer side , you can filter using pipes , instead to using ngIf or filtering in component.

events.pipe.ts

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



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

}

your-component.html

user_3980621 · Answer

try to use ng-conatiner and ngIf , this will prevent adding ion-slide compoenet in case of the event is upcomming


  
  
   ....

Ionic show data which is equal to the value

4 Answers