*ngFor Question!

Hi guys ,
how can I put a condition next to *let job of jobs for example (status:“true”)
and thank you

<ion-list *ngSwitchCase="‘1’" >
<ion-item-sliding *ngFor=“let job of jobs”>

Have a parent element say <div>. Attach a ngIf there.

<div *ngIf="status === true">
   <ion-item-sliding  *ngFor=“let job of jobs”>
   <!--  some code -->
   </ion-item-sliding>
<!--  some code -->
</div>
1 Like

Nothing showed

Can you share a stackblitz demo?

bro , in component.ts what should I give status?

By default you can give true. Depends upon what is your project requirement.

when I give it true it show up in the first segment even In there “status” false
and when I give it false it show up in the second but when I click approve() its still show up in the second even in firestore , the value changed to true

I can’t say much without looking at full code? Can you share a stackblitz demo?

ok wait I’m upload it new

Bro here is my code , I had a probl uploading with stackblitz
so I put it in GitHub , I hope it s ok bro

Bro vivek-23 take a look and help me please ,this is .html

            <ion-header>
              <ion-toolbar color="primary">
                <ion-title >
                    Travaux à réaliser 
                </ion-title>

                <ion-button slot="end" routerLink="/travail"  mode="ios" >
                    <ion-icon slot="icon-only" name="add-circle"></ion-icon>
                  </ion-button>
                  <!--<div> *ngIf="isAdmin == 'true' || isCl == 'true'"</div>-->
                
                </ion-toolbar>
                
            </ion-header>

            
            <ion-toolbar >

              <ion-segment [(ngModel)]="nbr" color="secondary"  >
                <ion-segment-button value="1" >
                  <ion-label>Traveaux</ion-label>
                </ion-segment-button>
                <ion-segment-button value="2" >
                  <ion-label>Demandes</ion-label>
                </ion-segment-button>
              </ion-segment>


            </ion-toolbar>  



              <ion-content >
                  
                  <ion-list *ngIf="!jobs.length">
                      
                    <ion-item *ngFor="let item of [0, 1, 2]">
                    <ion-avatar slot="start">
                      <ion-skeleton-text animated></ion-skeleton-text>
                    </ion-avatar>
                    <ion-label>
                      <h3>
                        <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
                      </h3>
                      <p>
                        <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
                      </p>
                      <p>
                        <ion-skeleton-text animated style="width: 30%"></ion-skeleton-text>
                      </p>
                    </ion-label>
                  </ion-item>
                </ion-list>
                <div [ngSwitch]="nbr">
                    <ion-list  *ngSwitchCase="'1'" > 
                        <div *ngIf="status === true">
                    <ion-item-sliding *ngFor="let job of jobs">
                    <ion-item button [routerLink]="['/travail', job.id]">
                      <ion-avatar slot="start">
                        <img [src]="job.picture">
                      </ion-avatar>
              
                      <ion-label>
                        {{ job.title }}
                        <p>{{ job.description }}</p>
                        <p>{{ job.createdAt | date: 'short' }}</p>
                      </ion-label>
              
                    </ion-item>
              
                    <!--
                                <ion-note color="primary" slot="end" *ngIf="product.price">{{ product.price | currency: 'BRL' }}</ion-note>
                     -->
            <ion-item-options side="end">
                <ion-item-option color="danger" (click)="deleteJob(job.id)">
                  <ion-icon slot="top" name="trash"></ion-icon>
                  Supprimer
                </ion-item-option>
              </ion-item-options>
                  </ion-item-sliding>
                </div>

                </ion-list>
                <ion-list *ngSwitchCase="'2'">
                    <div *ngIf="status === false">
                  <ion-item-sliding *ngFor="let job of jobs">
                    <ion-item button [routerLink]="['/travail', job.id]">
                      <ion-avatar slot="start">
                        <img [src]="job.picture">
                      </ion-avatar>
              
                      <ion-label>
                        {{ job.title }}
                        <p>{{ job.description }}</p>
                        <p>{{ job.createdAt | date: 'short' }}</p>
                      </ion-label>
              
                    </ion-item>
              
                    <!--
                                <ion-note color="primary" slot="end" *ngIf="product.price">{{ product.price | currency: 'BRL' }}</ion-note>
            -->
            <ion-item-options side="end">
                <ion-item-option color="danger" (click)="deleteJob(job.id)">
                  <ion-icon slot="top" name="trash"></ion-icon>
                  Supprimer
                </ion-item-option>
                <ion-item-option color="tertiary" (click)="approveJob(job.id)" >
                  Approver
                </ion-item-option>
              </ion-item-options>
                  </ion-item-sliding>
                </div>

                  </ion-list>
                  </div>
              
              </ion-content>

and this is ,ts

        import { Component, OnInit  } from '@angular/core';
        import { LoadingController, ToastController } from '@ionic/angular';
        import { JobService } from 'src/app/services/job.service';
        import { Job } from 'src/app/interfaces/job';
        import { Subscription } from 'rxjs';


        @Component({
          selector: 'app-tab1',
          templateUrl: 'tab1.page.html',
          styleUrls: ['tab1.page.scss']
        })




                  export class Tab1Page implements OnInit {
                    private loading: any;
                    public jobs = new Array<Job>();

                    private jobsSubscription: Subscription;
                    nbr : string;
                    status:false | true;

                    constructor(
                      private loadingCtrl: LoadingController,
                      private jobService: JobService,
                      private toastCtrl: ToastController
                        ) {
                      this.jobsSubscription = this.jobService.getJobs().subscribe(data => {
                        this.jobs = data;
                      });
                      
                      
                    }


                    ngOnInit() { 
                  
                    }
                    
                    
                    ionViewWillEnter(){
                    
                      this.nbr='1'    
                    }

                    ngOnDestroy() {
                      this.jobsSubscription.unsubscribe();
                    }
                    isJobAvailable = false; // initialize the items with false

                  
                    

                    async presentLoading() {
                      this.loading = await this.loadingCtrl.create({ message: 'Attend SVP...' });
                      return this.loading.present();
                    }

                    async deleteJob(id: string) {
                      try {
                        await this.jobService.deleteJob(id);
                      } catch (error) {
                        this.presentToast('Erreur lors de la tentative de suppression');
                      }
                    }

                    async presentToast(message: string) {
                      const toast = await this.toastCtrl.create({ message, duration: 2000 });
                      toast.present();
                    }

                      
                    async approveJob(id: string){
                                try{
                                  await this.jobService.approveJob(id);

                                }catch(error){
                                  console.dir(error);
                                }
                              }}

job.service

      import { Injectable } from '@angular/core';
      import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore';
      import { Job } from '../interfaces/job';
      import { map } from 'rxjs/operators';
      import { ActivatedRoute } from '@angular/router';



      @Injectable({
        providedIn: 'root'
      })
      export class JobService {
        private jobsCollection: AngularFirestoreCollection<Job>;
        private jobID: string = null;


                      constructor(private afs: AngularFirestore,    private activatedRoute: ActivatedRoute,
                        ) {
                        this.jobsCollection = this.afs.collection<Job>('Jobs',ref => ref.orderBy("createdAt", "desc"));

                      }


                      

                      getJobs() {
                        return this.jobsCollection.snapshotChanges().pipe(
                          map(actions => {
                            return actions.map(a => {
                              const data = a.payload.doc.data();
                              const id = a.payload.doc.id;

                              return { id, ...data };
                            });
                          })
                        );
                      }

                      addJob(job: Job) {
                        return this.jobsCollection.add(job);
                      }

                      getJob(id: string) {
                        return this.jobsCollection.doc<Job>(id).valueChanges();
                      }

                      updateJob(id: string, job: Job) {
                        return this.jobsCollection.doc<Job>(id).update(job);
                      }

                      deleteJob(id: string) {
                        return this.jobsCollection.doc(id).delete();
                      }
                      approveJob(id: string){
                        return this.jobsCollection.doc<Job>(id).set({status : true },{merge : true})
                        }
                    }

Ok, I can see the code but I would really need a stackblitz demo to reproduce the issue. You have to just add your files there(create a folder if required) and share the link. I am asking this because it’s too difficult for me to see some code and fix it without reproducing your issue at my end.

It’s maybe more something like this that you wanna do ? It’s hard to understand what you’re looking for to be honest…

<div *ngFor=“let job of jobs”>
   <ion-item-sliding  *ngIf="job.status === true">
   <!--  some code -->
   </ion-item-sliding>
<!--  some code -->
</div>

I am not in need of help. I just want the OP to share a stackblitz demo.

Yeah I know I juste quoted you and tried something else with your idea, but I agree, we can’t help him more if he doesn’t give us more

1 Like

Ues pipes in *ngFor like this:

TypeScript:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'customPipe'
})
export class CustomPipe implements PipeTransform {

  transform(value: any, args: any): any {
    if(Array.isArray(value)){
      return value.filter(item => item.status == args);
    }else{
      return [];
    }
  
  }
}

HTML:
if status of job is true:

<ion-item-sliding *ngFor=“let job of jobs | customPipe:true”>

if status of job is false

<ion-item-sliding *ngFor=“let job of jobs | customPipe:false”>

I have 2 condition

<div *ngIf="status === true">
   <ion-item-sliding  *ngFor=“let job of jobs”>
   <!--  some code -->
   </ion-item-sliding>
<!--  some code -->
</div>
<div *ngIf="status === false">
   <ion-item-sliding  *ngFor=“let job of jobs”>
   <!--  some code -->
   </ion-item-sliding>
<!--  some code -->
</div>

We won’t be able to help you more with this without a stackblitz demo bro, as @vivek-23 asked before :confused:

I have never used stackblitz How its works ? how can I put my project in it ?

I updated my code in the top.