离子/角离子项目，点击按钮选择隐藏所选离子项目

Question

我使用的是Ionic 5/Angular，我有一个ion-item的列表。每个都有一个按钮。

下面的代码示例：

<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就会消失。

我该怎么做？

Answer 1

这里有一个使用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;
}

Answer 2

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>

以及相应的组件：

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上创建了一个项目来玩它