查看孩子无法使用* ngIf ionic3

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使元素呈现，但它display属性使用CSS设置为none，这样你可以访问myElement即使它不是如下所示：

<div class="alert" [hidden]="show" #myElement> 
    <h5>Here is my animation</h5> 
</div>