带有if条件和布尔值的循环打字稿答案

【问题标题】：Typescript for loop with if condition and a boolean value带有if条件和布尔值的循环打字稿
【发布时间】：2021-05-23 02:08:42
【问题描述】：

我有一个 for 循环，它生成了 2 个按钮，两个按钮都根据每行的条件显示或隐藏。出于某种原因，我使用布尔值来满足一个条件，然后所有行都受到影响，但我只希望那个特定的行受到影响。以下是我的代码。该程序是用 ionic Angular 编写的。

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

请指教

【问题讨论】：

是否有解决方案：stackoverflow.com/questions/43812770/ngif-else-if-in-template
您对 this.isPass 的使用意味着整个班级只有一份副本，而不是每个“miqaatITS”一份。如果这是一个对象，则其上的布尔属性会更好。

标签： javascript angular typescript ionic-framework

【解决方案1】：

在这种情况下，isPass 是一个布尔值。它将采用 for 循环中的最后一个值。您需要做的是，为每一行引入一个新变量，然后应用它。而不是一个单一的 ispass，你将拥有所有行的 pass。像这样的事情：

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

【讨论】：

【解决方案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="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.');
    }
  );
}
}

【讨论】：