Question

我正在使用离子3和动画。

我安装了

npm install --save CSS-animator

这是我的模板

<div class="alert" *ngIf="!show" #myElement> 
  <h5>Here is my animation</h5>
</div>

<ion-footer>
  <ion-row ion-button class="btn-full" *ngIf="show">
    <ion-col text-left (click)="nav()">
        Checkout   <ion-icon name="cart"></ion-icon>
    </ion-col>
    <ion-col text-right>
        <img src="./assets/images/rupee-black.svg" alt="Rupee">4200
    </ion-col>
  </ion-row>
</ion-footer>

我声明变量，名称显示也导入视图子

import { Component, ViewChild } from '@angular/core';
import { AnimationService, AnimationBuilder } from 'css-animator';

export class CartPage {

    show: boolean = true;
    private animator: AnimationBuilder;
    @ViewChild('myElement') myElem;

    constructor(
      animationService: AnimationService, 
      public navCtrl: NavController, 
      public navParams: NavParams
    ) {
        this.animator = animationService.builder();
    }

    nav() {
        var i = document.querySelector('alert');
        this.show = false;
        this.animator.setType('bounce').show(this.myElem.nativeElement);
    }

}

我收到此错误。

Cannot read property 'nativeElement' of undefined

我该如何解决这个问题。

请建议我，

由于

Answer 1

当您使用*ngIf时，如果不满足条件，则不会呈现HTML，因此当您将show设置为true时，不会呈现myElement。您应该使用hidden代替ngIf，以便呈现该元素，但使用css将display属性设置为none，这样您就可以访问{{ 1}}即使它没有如下所示：

myElement

查看不使用* ngIf ionic3的儿童

1 个答案: