Angular 2 - Klik untuk menampilkan dan menyembunyikan

Saya ingin menggunakan tombol untuk menampilkan dan menyembunyikan elemen di HTML saya. Saya tahu saya harus menggunakan boolean di typescript dan *ngIf di HTML.

Dalam typescript saya, saya memiliki boolean:

showHide: false;

Dalam HTML saya, saya memiliki:

<button (click) = "showHide=true" </button>

Saya menggunakan ini untuk menyembunyikan elemen. Saya menyembunyikan elemen-elemen saya dengan menggunakan *ngIf="showHide" pada elemen yang ingin saya sembunyikan.

Tetapi bagaimana saya bisa mengembalikan elemen yang telah saya sembunyikan dengan tombol yang sama?

Pemrograman
html angular
21 April 2017 в 2:11
Belum ada tampilan
Larutan

coba ini

click
Tiep Phan
Jawaban edit 21 April 2017 в 2:35
Komentar (0)

Anda bisa menggunakan fungsi untuk mengubah dari true ke false dan sebaliknya, bukan hanya menetapkan showHide true setiap kali Anda mengklik tombol.

Untuk melakukannya, Anda perlu membuat fungsi, misalnya changeShowStatus untuk mengubah nilai showHide.

changeShowStatus(){
    this.showHide = !this.showHide;
  }

Kemudian Anda memanggil fungsi ini setiap kali Anda menekan tombol dengan mengubah showHide=true ke changeShowStatus():

show/hide

Untuk mengatur status awal, Anda bisa mengatur nilai showHide di konstruktor dan mendefinisikan showHide hanya sebagai boolean:

export class App {
  ...
  showHide: boolean;

  constructor() {
    this.showHide = true;
  }
  ...
}

Plunker: tampilkan/sembunyikan div dengan TS/Angular2

Wallace Sidhrée
Jawaban edit 12 Agustus 2017 в 6:28
Komentar (0)