Nativescript Angular ActivityIndi​​cator

Question

在我的Nativescript Angular应用程序中，我正在使用ActivityIndi​​cator，我在Nativescript Angular文档中看到的设置（GroceryList示例）：

<ActivityIndicator width="30" height="30" [busy]="refreshing" [visibility]="refreshing ? 'visible' : 'collapsed'" horizontalAlignment="center" verticalAlignment="center"></ActivityIndicator>

如果使用它的组件我有：

export class MyComponent {

  public refreshing = false;

........
}

然后我从我的后端获取一些数据：

public onRefreshTap() {
    console.log("onrefreshtap");
    this.refreshing = true;
    this.backend.getData(function (data) { //this.backend is my Service
        this.refreshing = false;
    })
}

问题在于，当我将this.refreshing设置为true时，ActivityIndi​​cator会正确显示。但是当bakend请求完成时（因此，我把this.refreshing = false），ActivityIndi​​cator没有隐藏......（而且似乎它的busy属性没有更新，它仍处于旋转状态）..

我做错了什么？

提前致谢

Answer 1

您还可以尝试访问refreshing属性，因为它已在下面的示例代码中显示。这可能是在服务的回调方法中访问属性的问题。

public onRefreshTap() {
    var that = this;
    this.refreshing = true;
    this.backend.getData(function (data) { //this.backend is my Service
        that.refreshing = false;
    })
}

或

public onRefreshTap() {
    this.refreshing = true;
    this.backend.getData((data) => {
        that.refreshing = false;
    })
}

Answer 2

可能有很多事情：
 1）Observable上的变为false，并未被视为＆＃34;由组件。
     ------解决方案是在区域中运行代码（参见https://angular.io/docs/ts/latest/api/core/index/NgZone-class.html）

 2）后端返回错误（我没有看到它处理代码中的错误）。
     ------解决方案是一个处理错误的函数。

 3）没有调用回调。在您的代码中，您将发送函数作为参数发送到backendService，因此服务可能没有执行它。
     ------尝试使用Promisses或Observables来处理返回的值（你必须向谷歌介绍它，因为我还在学习它们，我的解释将是最糟糕的）。 :)

这里有一些可行的代码：

my-component.html

 <ActivityIndicator [busy]="isWorking" [visibility]="isWorking?'visible':'collapse'"></ActivityIndicator>

我-component.ts

import { Component, NgZone } from "@angular/core";

    ...

export class MyComponent {
    isWorking:boolean = false;
    constructor(private backendService: BackendService, 
                private _ngZone: NgZone)
    {
        this.isWorking = false;
    }

    public onRefreshTap() {
        console.log("onrefreshtap");
        this.isWorking = true;
        this.backendService.getData()
            .then( 
                // data is what your BackendService returned after some seconds
                (data) => {
                    this._ngZone.run(
                        () => {
                            this.isWorking = false;

                            // I use to return null when some Server Error occured, but there are smarter ways to deal with that
                            if (!data || data == null || typeof(data)!=='undefined') return; 

                            // here you deal with your data
                        }
                    )
                } 
        );
    }

}