Angular 带有按钮的离子/角度离子项目单击以选择隐藏选定离子项目

我使用的是Ionic 5/Angular，我有一个离子项目列表。每个按钮都有一个按钮

下面的代码示例：

一个
两个
三

我需要能够在任何点击，并为它自我隐藏

因此，如果我单击第一个

离子项目的按钮，那么
离子项目将消失

我如何才能做到这一点？
这里有一个使用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>

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>

我还在上创建了一个项目，可以用来玩它。
一旦你得到好的关键词，谷歌优先：
<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));
  }
}