带if条件和布尔值的循环的类型脚本

Question

我有一个for循环，它生成了2个按钮，这两个按钮都根据每行的情况显示或隐藏。出于某种原因，我为它使用了一个布尔值，当满足一个条件时，所有的行都会受到影响，但我只希望那个特定的行受到影响。以下是我的代码。这个程序是用爱奥尼亚角写的。

前端HTML文件

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

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

请指教

Answer 1

你可以用这种方式，

Html代码。

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

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

Answer 2

在这种情况下，＜code＞isPass＜/code＞是一个布尔值。它将获取for循环中的最后一个值。您需要做的是，为每一行引入一个新变量，然后应用它。您将获得所有行的is pass，而不是单个ispass。大致如下：

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