selectedIndex not Updating Drop-Down

[emircm]

Hi,

I'm using this plugin in my nativescript angular app. I get the data from a webservice, which I will use to update a form. The data is requested in component's constructor. The items also comes from a webservice, but they're requested in ngOnInit. Then (inside items fetcher subscribe), after I've populated items, I set the selectedIndex value. The problem is the selectedIndex is not being reflected in the form, that means it still shows the hint.

Debugging I've added a button to the form that increases the value of the selectedIndex. In this case the drop-down field is properly updated, showing the corresponding value.

Any clarifications are appreciated.

Code snippets below:

profile:

    "@angular/animations": "~4.2.0",
    "@angular/common": "~4.2.0",
    "@angular/compiler": "~4.2.0",
    "@angular/core": "~4.2.0",
    "@angular/forms": "~4.2.0",
    "@angular/http": "~4.2.0",
    "@angular/platform-browser": "~4.2.0",
    "@angular/platform-browser-dynamic": "~4.2.0",
    "@angular/router": "~4.2.0",
    "font-awesome": "~4.7.0",
    "nativescript-angular": "~4.2.0",
    "nativescript-drop-down": "~3.1.1"

Component constructor:

constructor(
    private dataService: DataService,
    private appComponent: AppComponent) {
        this.dataService.getData()
        .subscribe ( data => {
            console.log(JSON.stringify(data));
            if (data.message.status == "success") {
                this.user.item = data.item;
            } else {
                console.log("Error: " + data.message.error);
            }
        })
    }

ngOnInit:

ngOnInit() {
    this.dataService.getItems()
    .subscribe(
        response => {
            this.localItems = response;
            this.localItems.forEach(element => {
                this.items.push(element.nome);
            })
            this.selectedIndex = +this.items.indexOf(this.user.item);
        }
    );
}

Thanks in advance.

[PeterStaev]

Hey @emircm , sadly I cannot help you with so few info as it can be anything - it could be you are not bounding items or index correctly. I would suggest you start from the demo ng project in this repo, start adding your code there and see at what point it will break. Then you can attach the project to the issue so I can trace if there is some issue and what it is.

[emircm]

I'll do that @PeterStaev, thanks!

[lukeramsden]

Yeah I'm getting this too, running this function:

  public reset(args: EventData) {
    console.log('reset')
    this.SelectedManafacturer = undefined
    this.SelectedModel        = undefined
    this.SelectedTank         = undefined
    this.SelectedYear         = undefined
  }

Doesn't seem to change the displayed item back to the hint like I want it to.

<dd:DropDown items="{{ ArrayManafacturer }}" selectedIndexChanged="{{ DropdownChange }}" hint="Manufacturer" selectedIndex="{{ SelectedManafacturer }}" />

DropdownChange isn't called when I run reset either, implying the dropdown view isn't being told about the update...? Not really sure how the internals of the plugin work.

EDIT: Running this.DropdownManafacturer.selectedIndex = undefined works, which is an ok workaround for now, but I'm guessing is not intended behaviour.

EDIT 2: On further thought, that makes it sound like the binding is wrong, but is there an example of doing it properly with a public TS class variable?

[PeterStaev]

@lukeramsden , sounds like your TS Class does not implement correctly and is not an observable one. Thus it does not trigger correctly the change notifications required for binding. There is nothing special about binding the Drop Down compared to other controls. You must bind to an Observable object. So your TS must extend Observable. Also there is a catch about public properties as they are not considered observable by default and they do not trigger change notifications. One way to solve this is using a decorator as explained here.

[lukeramsden]

Thanks for the info

[lukeramsden]

Yeah, this helped me fix the issue, this should be documented somewhere in NativeScript, and if it already is, should be prominent because public properties not being observable is counter-intuitive because they are the one thing you want to be observable.

[PeterStaev]

No further response so closing this one for now. In case you still have problems, please provide more details.