離子2：隱藏和顯示div與ngClass

Question

我有一個div在我的離子2頁，我想要顯示和隱藏它，當點擊時，第一部分完成（顯示）我使用ngClass做到這一點，但第二部分不能做到這一點，我認爲是一個邏輯問題，看到波紋管的圖像：

，這裏是html代碼：

<ion-content> 
    <ion-fab right [ngClass]="isCalendar ? 'show-calendar':'hide-calendar' " (click)="showCalendar();"> 
     <div class="close" (click)="hideCalendar()" [ngClass]="isNotCalendar ? 'hide-Calendar' :'show-calendar'"> 
      <ion-icon class="icon-close" name="ios-close"></ion-icon> 
     </div> 
     <p class="day" [ngClass]="isClicked ? 'day-no-click':'day' ">DAY</p> 
     <p class="month" [ngClass]="isClicked ? 'monthclicked':'month' " (click)="selectMonth()">MONTH</p> 
     <p class="year">YEAR</p> 
     <div class="button-date" ion-button round> 
      <p>.&nbsp;.&nbsp;.</p> 
     </div> 
     <div class="Progress" style="transform: rotate(90deg);"> 
      <progress max="100" value="0" class="Progress-main"> 
       <div class="Progress-bar" role="presentation"> 
        <span class="Progress-value" style="width: 80%;"></span> 
               </div> 
      </progress> 
     </div> 

    </ion-fab> 
    <ion-fab top left> 
     <ion-searchbar> </ion-searchbar> 
    </ion-fab> 
    <ion-img class="map" [src]="mapsource" (click)="changeView(mapsource)"></ion-img> 
    <ion-icon class="icon-bonfire" name="ios-bonfire"></ion-icon> 
    <ion-icon class="icon-heart" name="md-heart"></ion-icon> 
    <ion-icon class="icon-nuclear" name="md-nuclear"></ion-icon> 
    <ion-fab top right (click)="showCalendar()"> 
     <button ion-fab color="whitecolor"><ion-icon class="calandaricon" name="md-calendar"></ion-icon></button> 
    </ion-fab> 
    <div class="calendar"> 

    </div> 

    <ion-fab bottom right class="fablocate"> 
     <button ion-fab color="whitecolor"><ion-icon class="locateicon" name="md-locate"></ion-icon></button> 
    </ion-fab> 
    <ion-fab (click)="ListParrots();" bottom left class="linklist"> 
     <ion-img class="parrot-list-link" src="img/citydirty.jpg"></ion-img> 
    </ion-fab> 
</ion-content> 

，這裏是TS文件代碼：

import { Component } from '@angular/core'; 
import { IonicPage, NavController, NavParams } from 'ionic-angular'; 
import {ParrotListPage } from '../parrot-list/parrot-list'; 

/** 
* Generated class for the MapPage page. 
* 
* See https://ionicframework.com/docs/components/#navigation for more info on 
* Ionic pages and navigation. 
*/ 

@IonicPage() 
@Component({ 
    selector: 'page-map', 
    templateUrl: 'map.html', 
}) 
export class MapPage { 

    mapsource :any; 
    isClicked : Boolean= false; 
    isCalendar : Boolean=false; 
    isNotCalendar : Boolean=false; 
    constructor(public navCtrl: NavController, public navParams: NavParams) { 

    this.mapsource = '../../img/map.jpg'; 
    } 

    changeView(mapsource){ 
    this.mapsource ='../../img/mapzoom.jpg'; 
    if (mapsource == this.mapsource) { 
     this.mapsource = '../../img/map.jpg'; 
    }else{ 
     this.mapsource= '../../img/mapzoom.jpg'; 
    } 

    } 

    ionViewDidLoad() { 
    console.log('ionViewDidLoad MapPage'); 
    } 

    ListParrots(){ 
    this.navCtrl.push(ParrotListPage); 
    } 

    showCalendar(){ 
    this.isCalendar = true; 
    } 
    hideCalendar(){ 
    this.isNotCalendar = false; 
    } 
    selectMonth() { 

    this.isClicked = true; 



    } 

} 

這裏是CSS

.show-calendar { 
     height: 100%; 
     width: 25%; 
     background-color: color($colors, notification-blue); 
     margin-right: -10px; 
     z-index: 1000; 
     text-align: center; 
    } 
    .hide-calendar { 
     display: none; 
    } 
    .close { 
     width: 50px; 
     height: 50px; 
     text-align: center; 
     background-color: white; 
     border-radius: 50%; 
     line-height: 50px; 
     margin-top: 20px; 
     margin-left: auto; 
     margin-right: auto; 
    } 

可以檢查一些與邏輯，並告訴如何定義完全ngClass功能？預先感謝

Answer 1

嘗試這樣的：

<button class="btn btn-primary" (click)="showCalendar()">showCalendar</button> 

<div [ngClass]="isCalendar ? 'show-calendar':'hide-calendar'"> 
    <h1>Calendar Content</h1> 
</div> 

和方法：

export class Component { 

    private isCalendar: boolean = false; 

    showCalendar() { 
     this.isCalendar = this.isCalendar ? false : true; 
    } 
}