Nativescript-angular: [Solved] Second PullToRefresh in the same page doesn't work

[ngydat]

Hi everyone,

So the issue here is a little follow-up of this issue (which was solved). So basically, I have one page in my mobile app with three tabs : Home, Notifications and Messages. When it comes to get the notifications and the messages, there is no problem. Then I wanted to add a pull-to-refresh functionality by using this plugin. Thanks to @matt4446, I was able to do that for the notifications tabs. But for the messages, even though I put the same code, I get a blank page when I pull to refresh.

Here is the view : home.html
and the class which handles the refresh : home.component.ts

Where could it come from ?

Thank you in advance

[matt4446]

@ngydat Glad you got that working ... ive been a bit busy to check. Couple of guesses for you:
It might want a scrollview (that was the eureka in my version) as the immediate element to the 'PullToRefresh' rather than the stackpanel ...
It might even accept the listview (possibly). I have not tried that.

[ngydat]

@matt4446 when you say immediate element, you mean the element right below PullToRefresh ? Because in that case, I did replace it with a ScrollView and the result being that my messages are not displayed at all. Same thing if I remove the StackLayout element

[matt4446]

Its working quite well on my demo: https://twitter.com/MatthewGreen35/status/720024608968216576

<PullToRefresh (refresh)="refreshMe($event)">
        <ScrollView>
            <StackLayout>
                <ng-content></ng-content>
            </StackLayout>
        </ScrollView>
</PullToRefresh>

That was the purpose for the order of elements above on my version (control component, page component).

So if you try
pulltorefresh -> scrollview -> stackpanel what happens if you add a label (just to prove the list isn't causing the issue) as the first child of the stacklayout and the list after the label?

[ngydat]

Well I did as you said and it seems the issue comes from the list. The label is still there but the list disappears. But it's weird I didn't have the issue with the list of notifications

[matt4446]

does this._notificationService.load() return an observable?

if yes, you could assign notificationsList as observable<Array<Notification>
using: this._notificationService.load().toArray()

and then on the listview use [items]="notificationsList | async"
async pipe is described here

... I believe i have seen it in the test code for nativescript-angular listview

But as for your scenario (if you want to skip trying the above)... i would debug it and see if there are items in the second request. (maybe bind the length of the items on the label for the moment?
And instead of adding items individually to a empty array - just switch it out with a prefilled array.

another thing it could be ... change detection strategy.
@Component({changeDetection:ChangeDetectionStrategy.OnPush})

[ngydat]

I tried first adding the change detection strategy and whatever list I refresh (notifications or messages), I have to pull twice to see the changes.

Edit : nevermind the change detection strategy was a one time thing. The list keeps disappearing (which I partially blame on the fact I use this line this.receivedMessagesList = []; even though I use the same line for the notifications)

Edit 2: Also like you said I tried displaying the length of the items by just putting a label. Before the refresh I have 8 messages and once I pull to refresh the number goes to zero and goes back to eight after.

[ngydat]

@matt4446 you're the man :D
Little correction though : if I reassign notificationsList asObservable<Array<Notification>>, I'll have to do this :
this.notificationsList = this._notificationService.load(); (no need to add the toArray function).
And I also did this for the list of messages and it works now so thank you again for your time

[matt4446]

@ngydat Sweet. Well done & No worries. This was nice distraction from work.