動態隱藏項目[隱藏]

我這樣做，我認爲它可以工作，因爲我在控制檯中看到[隱藏]每個元素更新，但它不隱藏元素。我似乎應該刷新頁面。我不明白爲什麼它不動態顯示：動態隱藏項目[隱藏]

```

hideElement: boolean = false; 
... 
onContextChange(value): void { 
    var i = 0; 
    for (var i = 0; i < this.items.length; i++) { 
     if ((this.items[i]["context"]) == value) { 
     console.log(this.items[i]["context"]); 
     this.items[i].hideElement = true; 
     } 
     else { 
     this.items[i].hideElement = false; 
     console.log("out"); 
     } 
    } 
    console.log(this.items[0].hideElement); 
    console.log(this.items[1].hideElement); 
    console.log(this.items[2].hideElement); 
    console.log(this.items[3].hideElement); 
    console.log(this.items[4].hideElement); 
    console.log(this.items[5].hideElement); 
    }

這裏的名單：

<ion-list> 
    <ion-item-group reorder="{{flag}}" (ionItemReorder)="reorderItems($event)"> 
     <ion-item-sliding *ngFor="let item of items" #SlidingItem> 
     <ion-item [hidden]="hideElement" (click)="goTo(item)"> 
      {{item.id}} 
      <p>{{item.label}}</p> 
      <p>Engagement : {{item.points}}% </p> 
     </ion-item> 
     <ion-item-options side="right"> 
      <button ion-button (click)="always(SlidingItem, item)"> 
     100% 
     </button> 
      <button ion-button (click)="often(SlidingItem, item)"> 
     75% 
     </button> 
      <button ion-button (click)="sometimes(SlidingItem, item)"> 
     50% 
     </button> 
      <button ion-button (click)="rarely(SlidingItem, item)"> 
     25% 
     </button> 
      <button ion-button (click)="never(SlidingItem, item)"> 
     0% 
    </button> 
     </ion-item-options> 
     </ion-item-sliding> 
    </ion-item-group> 

    </ion-list> 

this.itemsHome = [ 
     { 
     id: 'A1', 
     action: 0, 
     points: 0, 
     label0: '', 
     label25: 'A1L25', 
     label50: 'A1L50', 
     label75: 'A1L75', 
     label100: 'A1L100', 
     context: 'atHome', 
     category: 'reduceEnergyConsomation', 
     link: 'Li1' 
     }, 
     { 
     id: 'A2', 
     action: 0, 
     points: 0, 
     label0: '', 
     label25: 'A2L25', 
     label50: 'A2L50', 
     label75: 'A2L75', 
     label100: 'A2L100', 
     context: 'Outside', 
     category: 'reduceEnergyConsomation', 
     link: 'Li2' 
     },

這裏的選擇組件：

<div class="select"> 
    <ion-item> 
     <ion-label>Filter</ion-label> 
     <ion-select class="no-border" (ionChange)="onContextChange($event.value)" [selectOptions]="selectContext" [(ngModel)]="context"> 
     <ion-option value="all">All</ion-option> 
     <ion-option value="atHome">At home</ion-option> 
     <ion-option value="outstide">Outside</ion-option> 
     </ion-select> 
     <ion-select class="no-border" [selectOptions]="selectCategory" [(ngModel)]="category"> 
     <ion-option value="all">All</ion-option> 
     <ion-option value="reduceWaterConsommation">Reduce water consommation</ion-option> 
     <ion-option value="reduceEnergyConsommation">Reduce energy consommation</ion-option> 
     </ion-select> 
    </ion-item> 
    </div>

`` `

來源

2017-05-01 user2182652

你r hideElement布爾屬於項目對象。

更改hidden在HTML中：

<ion-item [hidden]="item.hideElement" (click)="goTo(item)">

來源

2017-05-01 04:03:17

動態隱藏項目[隱藏]

回答

相關問題