Typescript for loop with if condition and a boolean value

Question

I have a for loop which generated 2 buttons and both buttons are show or hide base on the condition of each row. I am using a boolean value for it for some reason one condition is met then all rows are affected but I only want that particular to be affected. Below are my codes. The program is written in ionic Angular.

frontend HTML file

<ion-list *ngFor="let ml of miqaatITS">
  <ion-item>
    <ion-label><b>{{ml.event}}</b><br>{{ml.date}}<br>{{ml.time}}</ion-label>
    <ion-button color="dark" [routerLink]="['/home/Allocation']" *ngIf="isPass">VIEW PASS</ion-button>
    <ion-button color="dark" fill="outline" *ngIf="!isPass" disabled>NO PASS</ion-button>
    <ion-button color="danger" >CANCEL PASS</ion-button>
  </ion-item>
</ion-list>

.ts file

 isPass = false;
feedData() {
console.log(this.authUser);
this.postData.user_id = this.authUser.user_id;
this.postData.token = this.authUser.token;
this.postData.itsnumber = this.authUser.itsnumber;
if (this.postData.user_id && this.postData.token) {
  this.miqaat.miqaatITSData(this.postData).subscribe(
    (res: any) => {
      console.log(res);
      for(var pass of res.miqaatITS){
        console.log(pass.allocation == 1);
        if(pass.allocation == 1) {
          this.isPass = !this.isPass;
        }
      }
      this.miqaat.changeMiqaatData(res.miqaatITS);
    },
    (error: any) => {
      this.toastService.presentToast('Network Issue.');
    }
  );
}
}

Please advise

Would it be a solution: https://stackoverflow.com/questions/43812770/ngif-else-if-in-template — Beller, Feb 20 '21 at 06:09
Your use of this.isPass implies that there is only one copy of it for the whole class, instead of one per "miqaatITS". If this is an object a boolean property on that would work better. — CodeNinja, Feb 20 '21 at 06:35

score 0 · Answer 1 · answered Feb 20 '21 at 10:56

You can use in this way,

Html code.

<ion-list *ngFor="let ml of miqaatITS">
  <ion-item>
    <ion-label><b>{{ml.event}}</b><br>{{ml.date}}<br>{{ml.time}}</ion-label>
    <ion-button color="dark" [routerLink]="['/home/Allocation']" *ngIf="ml.allocation">VIEW PASS</ion-button>
    <ion-button color="dark" fill="outline" *ngIf="!ml.allocation" disabled>NO PASS</ion-button>
    <ion-button color="danger" >CANCEL PASS</ion-button>
  </ion-item>
</ion-list>

.ts code

miqaatITS:any;
 isPass = false;
feedData() {
console.log(this.authUser);
this.postData.user_id = this.authUser.user_id;
this.postData.token = this.authUser.token;
this.postData.itsnumber = this.authUser.itsnumber;
if (this.postData.user_id && this.postData.token) {
  this.miqaat.miqaatITSData(this.postData).subscribe(
    (res: any) => {
      console.log(res);
      this.miqaatITS = res.miqaatITS
      
      this.miqaat.changeMiqaatData(res.miqaatITS); // Dont know why you have used this. Remove if this is it not usefull.
    },
    (error: any) => {
      this.toastService.presentToast('Network Issue.');
    }
  );
}
}

score 0 · Accepted Answer · answered Feb 21 '21 at 04:22

In this case, isPass is a single boolean value. It will take the last value in the for loop . What you need to do is, introduce a new variable for each row and then apply it. Instead of a single ispass, you'll have is pass for all the rows.Something like this:

************  In .ts code ********
console.log(res);
      for(var pass of res.miqaatITS){
        let pass['isPass'] = false;
        console.log(pass.allocation == 1);
        if(pass.allocation == 1) {
          pass['isPass'] = !pass['isPass'];
        }

********* in html ********
<ion-button color="dark" fill="outline" *ngIf="!!ml.isPass" disabled>NO PASS</ion-button>

Note: you need two exclamation marks, because it'll check for null value too.

Typescript for loop with if condition and a boolean value

2 Answers2