Question

我正在使用Angular 2.我有一个数组，我循环遍历每个项目并设置一个布尔值。我控制台记录以确保正确设置。但是，当我对*ngif使用此功能时，它不起作用。我在这里错过了什么至关重要的作品？

模板：

 <div *ngFor="let item of viewableItems>
        <div class="thermometerMercury" *ngIf="showThermometer"></div>
 </div>

.TS

  processedItems: Item[] = [];
  showThermometer: boolean;

  checkDonation() {
      for (let i = 0; i < this.processedItems.length; i++) {
          let out = this.processedItems[i];
      if (out.isDonation && out.donationAmountDonatedByClient === 0) {
        this.showThermometer = true;
      } else {
        this.showThermometer = false;
      }
      console.log(i, this.showThermometer);
    }
  }

Answer 1

<div *ngIf ="showThermometer"></div>

Answer 2

这可能是问题所在： 1）processedItems是一个数组，正在处理并验证每个对象。 2）showThermometer不是特定于数组的对象，它看起来是全局的。 3）即使showThermometer对于对象1也是如此，对象2有可能将值更改为false（当条件不满足时） 4）* ngFor

使用相同的变量

所以，改变如下：

mplate：

<div *ngFor="let item of processedItems>
        <div class="thermometerMercury" *ngIf="item.showThermometer"></div>
 </div>

.TS

processedItems: Item[] = [];

  checkDonation() {
      for (let i = 0; i < this.processedItems.length; i++) {
          let out = this.processedItems[i];
      if (out.isDonation && out.donationAmountDonatedByClient === 0) {
        out.showThermometer = true;
      } else {
        out.showThermometer = false;
      }
      console.log(i, out.showThermometer);
    }
  }

Answer 3

模板：

 <div *ngFor="let item of viewableItems>
        <div class="thermometerMercury" *ngIf="item.showThermometer"></div>
 </div>

.TS

  processedItems: Item[] = [];
  showThermometer: boolean;

  checkDonation() {
      for (let i = 0; i < this.processedItems.length; i++) {
         let out = this.processedItems[i];
         this.showThermometer = false;
         if (out.isDonation && out.donationAmountDonatedByClient === 0)
         {
           this.showThermometer = true;
         }
         out['showThermometer'] = this.showThermometer;
         console.log(i, this.showThermometer);
       }
   }

即使函数返回true，角度2 ngif也不起作用

3 个答案: