Ionic / Angular ion-item with button click to select hide selected ion-item
Ionic / Angular ion-item with button click to select hide selected ion-item
我正在使用 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
将会消失。
我该怎么做?
这是一个使用 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;
}
Noelmout 的解决方案非常好,但我以更通用的方式做了另一个,因此您的列表可以是动态的。我还添加了一个 "show all"- 按钮来再次显示所有项目。
这里是 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 上创建了一个项目来试用它。
我正在使用 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
将会消失。
我该怎么做?
这是一个使用 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;
}
Noelmout 的解决方案非常好,但我以更通用的方式做了另一个,因此您的列表可以是动态的。我还添加了一个 "show all"- 按钮来再次显示所有项目。
这里是 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 上创建了一个项目来试用它。