Nativescript Typescript-Angular ListView can't not render item with ngIf

[tsonevn]

From @LeCaoPhuc on May 19, 2018 9:27

Did you verify this is a real problem by searching the NativeScript Forum and the other open issues in this repo?

Yes

Tell us about the problem

Hello . Sorry if my english so bad.
I see some issue for this problem but solution is not work or not good.
ListView iOS do not render item in TypeScript - angular if use ngIf or visibility.

Which platform(s) does your issue occur on?

iOS

Please provide the following version numbers that your issue occurs with:

• CLI: 4.0.1
• Cross-platform modules: "4.0.1"
• Runtime(s): 4.0.1"

Please tell us how to recreate the issue in as much detail as possible.

ListView iOS do not rendering in TypeScript - angular if use ngIf unless scroll to up until it lost and scroll down again.
I try to use property "visibility" but it have another problem. If you set default is "visible" it will work good, but if default is a "collapse" , it will likely ngIf and can't work.

If use get element with getChildAt() and set "visibility" again it don't work.
Have solution is use refresh() but it poor UX because If list have a textfield like my app TextField will lost focus and many problem as it will scrollToIndex if item is a big layout.

link playground recreate problem : https://play.nativescript.org/?template=play-ng&id=h72kgd&v=2
In project i try visibility but it was comment in .html file.

Thanks.

Copied from original issue: NativeScript/NativeScript#5840

[tsonevn]

HI @LeCaoPhuc,
If I understand you correctly, you are trying to hide the Achilles label on button tap event. I tested the scenario with the getChildAt method, and it seems to work as expected on my side and the Labels were hiding and showing correctly. For your convenience, I am attaching a sample project. You can review it and check if I am missing something.

[lecaobaophuc0912]

Hi @tsonevn.
No. my mean not only it. I want hide Achilles label and show Atalanta label in one click button event. But when Achilles label hidden then Atalanta not show. I must scroll listview up down then Atalanta label be show and it work from then on.
Because in your project have *ngIf='item.selected' in Atalanta label so it don't showing. I removed *ngIf and change to visibility and set again when click button. You can check in project eddited.

[tsonevn]

Hi @LeCaoPhuc,
I found that similar issue with the Change detection for iOS is already logged here. You can keep track on it for further info.
Meanwhile, you can call ListView's refresh method after changing the value of the Labels visibility properties. For example:

onClick(args) {
        let button: Button = args.object;
        let parent:GridLayout = <GridLayout>button.parent;
        let firstChild = parent.getChildAt(0);
        let secondChild = parent.getChildAt(1);
        var visbility = firstChild.visibility;
        if (visbility === "collapse") { 
            firstChild.visibility = "visible";
            secondChild.visibility = "collapse";
        }
        else{
            firstChild.visibility = "collapse";
            secondChild.visibility = "visible";
        }
        this.listView.nativeElement.refresh();
    }

You can check this example.

[lecaobaophuc0912]

Hi @tsonevn .
Before, refresh() listview is a solution I tried. But I need use a textField in a listView, when i
focus a TextField after call refresh() textField will lost focus.
I don't know this is bug or no ? And if i call textField.focus() to focus again it is prolem with UX, so i can't use it.
I tried create a project iOS native with swift 4 and test with isHiden of UILabel in cell UITableView and it work.
I can't find a reason of this problem.
Hope can you check it.
Thanks.

[tsonevn]

Hi @LeCaoPhuc,
Closing the keyboard for the selected TextField is something expected when the ListView is refreshed.
Can you tell us more about the UX issue, which appears after the focus is called?

[lecaobaophuc0912]

Hi @tsonevn .
You can see here . I need validated 1 textField in a listView . So when I change showError to show a Label username is invalid in textChange event but if don't use refresh() it don't show, but use refresh it will lost focus and call this.username.nativeElement.focus() it not work.

The main problem I want to say here not only issues above, I think those solution is temporary solution. ListView iOS is a power UI. But it have a weakness is a not "AUTO" binding like another UI. We must be call refresh() or any way such as getChildAt and set visibility etc..etc... to it can binding.
I hope can find a absolute solution to resolve problem ListView not render item when use binding by *ngIf or visibility without use refresh().

Thanks!