2017-07-02 146 views
0

我正在使用離子3與動畫。查看孩子無法使用* ngIf ionic3

我安裝

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 

我怎樣才能解決這個問題。

請諮詢我,

感謝

回答

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> 
+0

感謝烏爾reply.It的工作。 – ANISUNDAR

+0

@ANISUNDAR歡迎光臨! – Dhyey