Question

我的离子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

试试这样：

function sortByLength(array){
    array.sort(function(i, n){
        return i.length - n.length;
        });
    return array;
}

console.log(sortByLength(["Hello", "Cheese", "Bye"]));

和方法：

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

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

离子2：使用ngClass隐藏和显示div

1 个答案: