Nativescript Angular ActivityIndicator答案

【问题标题】：Nativescript Angular ActivityIndicatorNativescript Angular ActivityIndicator
【发布时间】：2016-12-15 10:13:54
【问题描述】：

在我的 Nativescript Angular 应用程序中，我使用的是 ActivityIndicator，按照我在 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 时，ActivityIndicator 正确显示。但是当 bakend 请求完成时（所以，我把 this.refreshing=false）ActivityIndicator 不会隐藏......（而且它的忙属性似乎没有更新，它保持在旋转状态）..

我做错了什么？

提前致谢

【问题讨论】：

标签： angularjs nativescript

【解决方案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;
    })
}

【讨论】：

【解决方案2】：

可能有很多东西：
1) 在 Observable 上对 false 的更改没有被组件“看到”。
------ 解决方案是在区域中运行代码（请参阅https://angular.io/docs/ts/latest/api/core/index/NgZone-class.html）

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

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

下面是一些可能有效的代码：

my-component.html

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

my-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
                        }
                    )
                } 
        );
    }

}

【讨论】：