我这样做了,我认为它可以工作,因为我在控制台中看到 [hidden] 已为每个元素更新,但它不会隐藏元素。看来我应该刷新页面。我不明白为什么它不能动态显示:
```
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>
```