Ioni c / Angular ion-item с нажатием кнопки, чтобы выбрать скрыть выбранный ion-элемент

Question

Я использую Ioni c 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 совершенно нормально, но я сделал еще одно более обобщенное c, чтобы ваш список мог быть динамическим c. Я также добавил кнопку «показать все», чтобы снова отобразить все элементы.

Здесь компонент. 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>

И соответствующий компонент. 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 для игры с ним.