Typescript for loop with if condition and a boolean value

Issue

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

Solution

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. 

Answered By - Srikar Phani Kumar Marti