ListView in tabview doesn't update

Question

Hello I have quite strange problem with listView in TabView. I spend all day with solving this, but with no result. Because of not refreshing listView (ngZone didn't help), I have to do refresh programatically in listView. It work's, but problem is when I go to this page from another page via router then is injected via contructor previous page. I have login page where I do:

this.router.navigate(["/home"]);

And in home.component.ts contructor looks like:

constructor(ngZone: NgZone, private page: Page) 

then I tried call:

var listview:ListView= <ListView> page.getViewById("listView1");

but it returs undefined (if login page did not exist and only home exist it works correctly). When I tried get some view from login page I get the view...

Can anybody give me advice what is wrong? I try a lot of things what i found, but nothing works... Thank you for your answer.

EDIT: Added code snippet: home.component.html

<GridLayout class="page">
    <TabView height="100%" (selectedIndexChange)="onTabChanged($event)" class="content p-20" >
        <ng-container *ngFor="let itema of objectKeys(site)" >
            <StackLayout *tabItem="{title: itema}">
                    <ListView [id]="itema" class="list-group" [items]="getData(itema)" (itemTap)="onItemTap($event)">
                        <ng-template let-item >
                            <GridLayout class="list-group-item" rows="*" columns="auto, *">
                                <Label row="0" col="0" [text]="item.name"></Label>
                                </Image>
                            </GridLayout>
                        </ng-template>
                    </ListView>
                </GridLayout>
            </StackLayout>
        </ng-container> 

    </TabView>
</GridLayout>

home.components.ts part:

   ngOnInit(): void {
            getJSON(url).then((r: any) => {
                console.log(r);
                this.ngZone.run(() => {
                    this.site = r;
                });
                //this part added because ngZone didn't work
                var listview: ListView = <ListView>this.page.getViewById(objectKeys(this.site)[0]);
                listview.refresh();
            }, (e) => {
                //TODO handle exception
                console.log(e);
            });
        }

I think the problem appear because ListView are constructed dynamically (refresh didn't work in onTabChange method neither.)

Answer 1

I don't see any issues with dynamic tabs / ng-container.

Here is a Playground sample was tested with both iOS & Android. If you still have issues on your end, please update the playground example where we can reproduce your issue.