1

我正在使用 Ionic 5 / Angular 并且我有一个ion-item's 列表。每个都有一个按钮。

下面的代码示例：

<ion-list>
    <ion-item>
        <ion-label>One</ion-label>
            <ion-button slot="end" (click)="selfhide()">
                <ion-icon slot="icon-only" name="close-outline"></ion-icon>
            </ion-button>
    </ion-item>
    <ion-item>
        <ion-label>Two</ion-label>
            <ion-button slot="end" (click)="selfhide()">
                <ion-icon slot="icon-only" name="close-outline"></ion-icon>
            </ion-button>
    </ion-item>
    <ion-item>
        <ion-label>Three</ion-label>
            <ion-button slot="end" (click)="selfhide()">
                <ion-icon slot="icon-only" name="close-outline"></ion-icon>
            </ion-button>
    </ion-item>
</ion-list>

我需要能够单击任何并使其自我隐藏。

因此，如果我单击第一个按钮，ion-item那么ion-item它将消失。

我怎样才能做到这一点？

4

2 回答 2

2

这是使用 ngIf 的解决方案：

<ion-list>
    <ion-item *ngIf="display.one">
        <ion-label>One</ion-label>
            <ion-button slot="end" (click)="selfhide('one')">
                <ion-icon slot="icon-only" name="close-outline"></ion-icon>
            </ion-button>
    </ion-item>
    <ion-item *ngIf="display.two">
        <ion-label>Two</ion-label>
            <ion-button slot="end" (click)="selfhide('two')">
                <ion-icon slot="icon-only" name="close-outline"></ion-icon>
            </ion-button>
    </ion-item>
    <ion-item *ngIf="display.three">
        <ion-label>Three</ion-label>
            <ion-button slot="end" (click)="selfhide('three')">
                <ion-icon slot="icon-only" name="close-outline"></ion-icon>
            </ion-button>
    </ion-item>
</ion-list>

在你的组件中

display = { one:true, two: true, three: true };


selfHide(item) {
    display[item] = false;
}
于 2020-04-07T13:28:35.247 回答
0

Noelmout 的解决方案绝对没问题，但我以更通用的方式做了另一个解决方案，因此您的列表可以是动态的。我还添加了一个“全部显示”按钮来再次显示所有项目。

这里的component.html：

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

  <ion-list>
    <ng-container *ngFor="let item of items">
      <ion-item *ngIf="item.visible">

        <ion-text slot="start">{{item.name}}</ion-text>
        <ion-button slot="end" (click)="hideItem(item)">
          <ion-icon slot="icon-only" name="close"></ion-icon>
        </ion-button>

      </ion-item>
    </ng-container>
  </ion-list>

  <ion-button (click)="displayAllItems()">
    show all
  </ion-button>

</ion-content>

以及相应的component.ts：

import { Component } from "@angular/core";
import { NavController } from "ionic-angular";

@Component({
  selector: "page-home",
  templateUrl: "home.html"
})
export class HomePage {
  public items = [
    { name: "One", visible: true },
    { name: "Two", visible: true },
    { name: "Three", visible: true },
    { name: "Four", visible: true }
  ];

  constructor(public navCtrl: NavController) {}

  hideItem(item: { name: string; visible: boolean }) {
    item.visible = false;
  }

  displayAllItems() {
    this.items.forEach(item => (item.visible = true));
  }
}

我还在stackblitz上创建了一个项目来玩它。

于 2020-04-07T13:47:40.277 回答