typescript - Angular 4'te bir div'i göster ve başka bir div'i gizle

Bir öğeyi butona tıkladığımda göstermek ve aynı butona tıkladığımda başka bir öğeyi gizlemek istiyorum. İşte kodum

Benim Kodum

Alt bölümü gösterebiliyorum ama aynı butona tıkladığımda 'alt içeriği göster' butonunu içeren öğeyi gizlemek istiyorum. Lütfen yardım edin.

Cevap #1

Tek bir fonksiyonla aşağıdaki gibi yapabilirsiniz, çalışan örnek Stackblitz'te burada.

Bileşen dosyasında

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  showMainContent: Boolean = true;

  constructor() {}

   ShowHideButton() {
      this.showMainContent = this.showMainContent ? false : true;
   }
}

Ve şablon dosyasında

<div *ngIf="!showMainContent">
  <button (click)="ShowHideButton()">Show Sub content</button>
  My Main content
</div>
<div *ngIf="showMainContent">
  Sub Content
  <button (click)="ShowHideButton()">Show Main Content</button>
</div>

Cevap #2

Geçerli duruma göre gösterilip gösterilmeyeceğini belirleyin. Eğer şu anda true ise, onu false yapın. Eğer şu anda false ise, onu true yapın.

ToggleButton() {
  this.showSelected = !this.showSelected;
}

İşte demo.

İlgili makaleler