Question

我这样做了，我认为它可以工作，因为我在控制台中看到为每个元素更新了[隐藏]，但它并没有隐藏元素。好像我应该刷新页面。我不明白为什么它不能动态显示：

```

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>

```

Answer 1

您的hideElement布尔属于项目对象。

将html中的hidden更改为：

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

使用[隐藏]动态隐藏列表中的项目

1 个答案: