[英]Ionic / Angular ion-item with button click to select hide selected ion-item
I am using Ionic 5 / Angular and I have a list of ion-item
's.我正在使用 Ionic 5 / Angular 并且我有一个ion-item
的列表。 Each one has a button.每个都有一个按钮。
The code example below:下面的代码示例:
<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>
I need to be able to click on any and for it to self hide.我需要能够单击任何并使其自我隐藏。
So if I clicked on the button of the first ion-item
then that ion-item
will disappear.因此,如果我单击第一个ion-item
的按钮,那么该ion-item
将消失。
How can I do this?我怎样才能做到这一点?
Here is a solution using ngIf:这是使用 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>
And in your component在你的组件中
display = { one:true, two: true, three: true };
selfHide(item) {
display[item] = false;
}
The solution by Noelmout is absolutely fine, but I did another one in a more generic way so your list could be dynamic. Noelmout 的解决方案绝对没问题,但我以更通用的方式做了另一个解决方案,因此您的列表可以是动态的。 I also added a "show all"- button to display all items again.我还添加了一个“全部显示”按钮来再次显示所有项目。
Here the component.html:这里的组件.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>
And the according component.ts:以及相应的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));
}
}
I also created a project on stackblitz for playing around with it.我还在stackblitz上创建了一个项目来玩它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.