Nativescript View.animate() не работает

Question

Я следую this учебник от nativescript.org для nativescript с угловым2.

Где, нажав на кнопку, я пытаюсь оживить фон StackLayout.

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

Я получаю ссылку на StackLayout используя @ViewChild декоратора.

@ViewChild("container") container: ElementRef;

toggleDisplay() функция выглядит следующим образом

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

по щелчку на кнопке я получаю исключение при выполнении

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) 

Я обнаружил, что 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, и т. д.), что поможет исследовать дальнейшую проблему.