隱藏並顯示來自ng的值

我需要顯示和隱藏列表中的元素。該列表通過使用*ngFor填充。隱藏並顯示來自ng的值

我需要更改這些圖標。我會通過使用{{item.check}}從*ngFor 得到Boolean的值。我不應該使用ts文件。我需要在.html文件中進行此修改。

<ion-grid> 
     <ion-row *ngFor="let item of dailyDays"> 
      <ion-col> 
       <ion-icon show={{item.check}} name="checkmark"></ion-icon> 
       <ion-icon show={{item.check}} name="close"></ion-icon> 
      </ion-col> 
     </ion-row> 
</ion-grid>

有人能幫助我，以顯示和{{item.check}}

來源

2017-07-17 Yokesh Varadhan

使用Boolean值隱藏這些項目你可以使用[attr.name]屬性（屬性綁定）

<ion-icon [attr.name]="item.check ? 'checkmark': 'close'"></ion-icon>

來源

2017-07-17 15:19:04

檢查我的回答，請 –

@YokeshVaradhan這看起來不錯，但通過使用我可以有單個元素，只需切換'ion-icon'元素'name'屬性 –

@PankajParkar這是三態嗎？ – abdoutelb

這爲我工作將這項工作在任何時間

<ion-grid> 
     <ion-row *ngFor="let item of dailyDays"> 
      <ion-col> 
       <ion-icon [hidden]="item.check" name="checkmark"></ion-icon> 
       <ion-icon [hidden]="item.check" name="close"></ion-icon> 
      </ion-col> 
     </ion-row> 
    </ion-grid>

來源

2017-07-17 15:21:47

做了你也試試ngIf

<ion-col> 
       <ion-icon *ngIf="item.check" name="checkmark"></ion-icon> 
       <ion-icon *ngIf="!item.check" name="close"></ion-icon> 
      </ion-col>

來源

2017-07-17 15:29:06 abdoutelb

你應該利用ngSwitch

編輯您的代碼如下所示應該工作。

<ion-grid> 
    <ion-row *ngFor="let item of dailyDays"> 
     <ion-col [ngSwitch]="item.check"> 
      <ion-icon *ngSwitchCase="true" name="checkmark"></ion-icon> 
      <ion-icon *ngSwitchCase="false" name="close"></ion-icon> 
     </ion-col> 
    </ion-row> 
</ion-grid>

你也可以添加* ngSwitchDefault代替的情況下默認圖標

進口使用下面的代碼ngSwitch模塊中的TS文件：

import { NgSwitch } from @angular/common;

來源

2017-07-17 15:38:58

如果「名」是一個角Input屬性的離子圖標組件，那麼你可以去：

<ion-col> 
 
    <ion-icon [name]="item.check ? 'checkmark' : 'close'"></ion-icon> 
 
</ion-col>

如果它是一個常用的HTML屬性，你可以這樣做：

<ion-col> 
 
    <ion-icon name="{{ item.check ? 'checkmark' : 'close' }}"></ion-icon> 
 
</ion-col>

爲了避免重複標籤兩次，因爲如果ngIf或ngSwitch

來源

2017-07-17 16:14:06

隱藏並顯示來自ng的值

回答

相關問題