如何通过http请求强制使用Observables对nativescript(typescript)进行UI"刷新"？

Question

我正在使用带有模板语法的TabView组件来迭代它并在其中添加项目(使用可观察的集合和异步管道).我的商品来自http请求.

我的home.component.tns.html如下:

<ActionBar title="Angular 2 Seed Advanced (nativescript)">
</ActionBar>
<StackLayout>
  <TabView selectedIndex="0" selectedColor="#FF0000">
    <template ngFor let-tab [ngForOf]="tabs | async">
      <StackLayout *tabItem="tab">
          <Label text="tab item"></Label>
      </StackLayout>
    </template>
  </TabView>

  <Button text="call something" (tap)="emptymethod()"></Button>

</StackLayout>

...和我的home.component.ts:

...
    export class HomeComponent{

        public tabs: Observable<any[]>;

        constructor(private _menuService: MenuService) {

            this._menuService.getMenu()
                .map((menus) => {
                    let result: Array<any> = [];

                    if (menus) {
                        menus.forEach(menu => {
                            result.push({ 'title': menu.title });
                        });
                    }
                    return result;
                })
                .subscribe(
                data => {
                    this.tabs = Observable.of<any[]>(data);
                },
                error => error => this._log.debug(error));
        }

        emptymethod() {
            this._log.debug('HomeComponent - nada invoked');
        }

        ngOnInit() {

        }
    ...

当接口renderized时,TabView的菜单没有出现,但是当我点击了某事物按钮,emptymethod被称为项目内TabView的出现,换言之,经过"刷新"该组件出现...

这不应该自动发生？

Answer 1

我有几个使用nativescript的情况,UI不会刷新(区域不会触发UI刷新或其他东西),最简单的方法是强制代码进入区域.这是一个小例子

export class TestClass {
   constructor(private _ngZone: NgZone) {
   }
   someOperation(){
     this._ngZone.run(() => {
       //Do whatever you want here
     })
   }
}

我知道这不是最好的解决方案,但这是目前我认为最干净的解决方法

这是我几个月前提到的另一个问题:Angular 2如何让Angular检测Angular之外的变化？