CODEWITHSUNDEEP
angularionic-framework
Umaiz Khan
Umaiz Khan

Reputation: 1227

Ionic show data which is equal to the value

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

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

enter image description here

Upvotes: 3

Views: 326

Answers (4)

Hamza Neffati
Hamza Neffati

Reputation: 155

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

Upvotes: 3

MagicaNexus
MagicaNexus

Reputation: 312

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 :

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

Upvotes: 3

Muhammed Albarmavi
Muhammed Albarmavi

Reputation: 24464

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

<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>

Upvotes: 0

Vivekanandan Sakthivelu
Vivekanandan Sakthivelu

Reputation: 81

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

Upvotes: 1

Related Questions