ionic 2：使用 ngClass 隐藏和显示 div

Question

我的 ionic 2 页面上有一个 div，我想在单击时显示和隐藏它，第一部分完成（显示）我使用 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;
    }
}