How to force UI "refresh" on nativescript (typescript) with Observables throught http requests?

Question

I'm using a TabView component with template syntax to iterate over it and add items inside (using an observable collection and async pipe). My items come from a http request.

My home.component.tns.html as follows:

<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>

...and my 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() {

        }
    ...

When the interface is renderized, the TabView menu does not appears, but when i click over call something button and emptymethod is called the items inside the TabView appears, in other words, after the "refresh" that component appears...

This should not happens automatically?

Community · Accepted Answer · 2017-05-23 12:26:06Z

14

I had couple of situations with nativescript where the UI wont refresh (the zone will not trigger a UI refresh or something) and the easiest way to do it is to force the code to run into the zone. Here is small example

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

I know this is not the best solution but thats the cleanest workaround currently I think

Here is another question that I asked months ago related to this: Angular 2 How to get Angular to detect changes made outside Angular?

edited May 23, 2017 at 12:26

CommunityBot

11 silver badge

answered Aug 22, 2016 at 12:35

Denko Mancheski

2,7192 gold badges20 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Manuel Villarroel Over a year ago

thanks dude, it worked perfect for me, it may not be the optimal solution, but it works fine!

abz · Accepted Answer · 2016-08-21 20:41:18Z

1

There seems to be a problem with how async operations and change detection is being handled in nativescript-angular when third party plugins are involved.

The current suggestion is to wrap all async notify calls within a zoned callback function.

The following video explains the issue and solution. Hope this helps. http://www.nativescriptsnacks.com/videos/2016/06/13/zoned-callbacks.html

More details on a corresponding feature request in Nativescript is present here. https://github.com/NativeScript/NativeScript/issues/2229

edited Aug 21, 2016 at 20:41

answered Aug 21, 2016 at 20:10

abz

113 bronze badges

Comments

paulpdaniels · Accepted Answer · 2016-05-19 22:55:10Z

0

I would guess because the change detection is not being triggered when the next block in the subscribe is called so the change to this.tabs is not detected until changed detection triggered by the button press.

You should be able to simplify your Observable and just do:

        this.tabs = this._menuService.getMenu()
            //Convert the Array into a flattened Observable
            .flatMap((menus) => menus ? menus.map(({title}) => {title}) : []);

Which will flatten the array into an Observable implicitly for your ngFor block.

answered May 19, 2016 at 22:55

paulpdaniels

18.7k2 gold badges54 silver badges58 bronze badges

2 Comments

Richard Lee Over a year ago

Is flatMap a function from Observables? I'm receiving a message flatMap in not a function ...or should i return a array from getMenu and not a Observable?

paulpdaniels Over a year ago

Yes flatMap is a function on Observable, it is an alias for mergeMap. You may need to import it see here

Collectives™ on Stack Overflow

How to force UI "refresh" on nativescript (typescript) with Observables throught http requests?

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related