Ionic / Angular 离子项，带有按钮单击以选择隐藏选定的离子项

Posted 2023-03-13

【中文标题】Ionic / Angular 离子项，带有按钮单击以选择隐藏选定的离子项

【英文标题】：Ionic / Angular ion-item with button click to select hide selected ion-item

【发布时间】：2020-07-19 16:27:29

【问题描述】：

我正在使用 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 就会消失。

我该怎么做？

【问题讨论】：

一旦你得到好的关键字，谷歌第一：***.com/questions/45549297/angular-hide-with-button

【参考方案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;

【参考方案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>

以及相应的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 上创建了一个项目来玩弄它。