Nativescript View.animate（）not working

Question

私は、angular2でnativescriptをnativescript.orgからthisチュートリアルに従います。

ここで、ボタンをタップすると、StackLayoutの背景をアニメーション化しようとしています。

<StackLayout #container> 
    <Button [text]="'Some text'" (tap)="toggleDisplay();"></Button> 
    </StackLayout> 

私は@ViewChildデコレータを使用してStackLayoutへの参照を取得しています。

@ViewChild("container") container: ElementRef;

toggleDisplay()機能は、私は私が見つけた

An uncaught Exception occurred on "main" thread. 
com.tns.NativeScriptException: 
Calling js method onClick failed 
[object Object] 
File: "/data/data/org.nativescript.groceries/files/app/tns_modules/@angular/core/bundles/core.umd.js, line: 9427, column: 20 
StackTrace: 
    Frame: function:'DebugAppView._rethrowWithContext', file:'/data/data/org.nativescript.groceries/files/app/tns_modules/@angular/core/bundles/core.umd.js', line: 9427, column: 21 
    Frame: function:'', file:'/data/data/org.nativescript.groceries/files/app/tns_modules/@angular/core/bundles/core.umd.js', line: 9440, column: 27 
    Frame: function:'', file:'/data/data/org.nativescript.groceries/files/app/tns_modules/nativescript-angular/renderer.js', line: 221, column: 26 
    Frame: function:'ZoneDelegate.invoke', file:'/data/data/org.nativescript.groceries/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js', line: 190, column: 28 
    Frame: function:'onInvoke', file:'/data/data/org.nativescript.groceries/files/app/tns_modules/@angular/core/bundles/core.umd.js', line: 6206, column: 41 
    Frame: function:'ZoneDelegate.invoke', file:'/data/data/org.nativescript.groceries/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js', line: 189, column: 34 
    Frame: function:'Zone.run', file:'/data/data/org.nativescript.groceries/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js', line: 83, column: 43 
    Frame: function:'NgZone.run', file:'/data/data/org.nativescript.groceries/files/app/tns_modules/@angular/core/bundles/core.umd.js', line: 6096, column: 66 
    Frame: function:'zonedCallback', file:'/data/data/org.nativescript.groceries/files/app/tns_modules/nativescript-angular/renderer.js', line: 220, column: 24 
    Frame: function:'Observable.notify', file:'/data/data/org.nativescript.groceries/files/app/tns_modules/data/observable/observable.js', line: 149, column: 23 
    Frame: function:'Observable._emit', file:'/data/data/org.nativescript.groceries/files/app/tns_modules/data/observable/observable.js', line: 168, column: 18 
    Frame: function:'onClick', file:'/data/data/org.nativescript.groceries/files/app/tns_modules/ui/button/button.js', line: 33, column: 32 

at com.tns.Runtime.callJSMethodNative(Native Method) 
at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1022) 
at com.tns.Runtime.callJSMethodImpl(Runtime.java:907) 
at com.tns.Runtime.callJSMethod(Runtime.java:895) 
at com.tns.Runtime.callJSMethod(Runtime.java:879) 
at com.tns.Runtime.callJSMethod(Runtime.java:871) 
at com.tns.gen.android.view.View_OnClickListener.onClick(android.view.View$OnClickListener.java) 
at android.view.View.performClick(View.java:5198) 
at android.view.View$PerformClick.run(View.java:21147) 
at android.os.Handler.handleCallback(Handler.java:739) 
at android.os.Handler.dispatchMessage(Handler.java:95) 
at android.os.Looper.loop(Looper.java:148) 
at android.app.ActivityThread.main(ActivityThread.java:5417) 
at java.lang.reflect.Method.invoke(Native Method) 
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:726) 
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:616) 

実行時例外を取得していますボタンをクリックしたときに、この

toggleDisplay() { 
    this.isLoggingIn = !this.isLoggingIn; 
    let container = <View>this.container.nativeElement; 
    container.animate({ 
     backgroundColor: new Color("#301217"), 
     duration: 200 
    }); 
    } 

のように見えますhere

こと

ビュープロパティをアニメーション化するには、 "ui/animation"モジュールが必要です。

import animation = require("ui/animation"); 

だから私のangular2アプリに私は

import * as animation from "ui/animation"; 

をしました。しかし、まだ同じエラーを取得。

またhere nativescriptのアンドロイドアニメーションにいくつかの問題があることがわかりました。しかし、それは例外をスローしません。

助けが必要ですか？

Answer 1

添付のコードスニペットを使用してケースをテストしましたが、この現象を再現できませんでした。 node_modules、platform、hooksフォルダを削除し、エミュレータまたはデバイスからアプリケーションを削除してプロジェクトを再構築することができます。私も使用したコードを添付しています。

app.component.html

<StackLayout #container> 
    <Button [text]="'Some text'" (tap)="toggleDisplay();"></Button> 
    </StackLayout> 

app.component.ts

import { Component, ViewChild, ElementRef } from "@angular/core"; 
import {View} from "ui/core/view" 
import {Color} from "color" 

@Component({ 
    selector: "my-app", 
    templateUrl: "app.component.html", 
}) 
export class AppComponent { 
    @ViewChild("container") container: ElementRef; 
    toggleDisplay() { 
    let container = <View>this.container.nativeElement; 
    container.animate({ 
     backgroundColor: new Color("#301217"), 
     duration: 200 
    }); 
    } 
} 

これが解決しない場合は、お使いの環境に関するいくつかの詳細情報を提供してください:(CLIを、tns-core-modules、nativescript-angularを、その他のバージョン）、これはさらに問題を調査するのに役立ちます。