Not able to bind hint with angular 2

[SjurWarEagle]

Hey,

currently the drop-down.android.js contains:

    DropDown.prototype._onHintPropertyChanged = function (data) {
        this.android.getAdapter().notifyDataSetChanged();
    };

the check if this._android exists is missing:

    DropDown.prototype._onHintPropertyChanged = function (data) {
        if (!this._android || !this._android.getAdapter()) {
            return;
        }
        this.android.getAdapter().notifyDataSetChanged();
    };

would be great, if you could add it to https://github.com/PeterStaev/NativeScript-Drop-Down/blob/master/drop-down.android.ts#L120

Not having this check results in only the first hint being rendered and of there is more than one drop-down, the others don't get their hint. Also this ugly exception occurs:

JS: EXCEPTION: Error in components/filmfilterbar/filmfilterbar.html:17:18 JS: ORIGINAL EXCEPTION: TypeError: Cannot read property 'getAdapter' of undefined JS: ORIGINAL STACKTRACE: JS: TypeError: Cannot read property 'getAdapter' of undefined JS: at DropDown._onHintPropertyChanged (/data/data/org.nativescript.dehudbiff/files/app/tns_modules/nativescript-drop-down/drop-down.js:111:21) JS: at onHintPropertyChanged (/data/data/org.nativescript.dehudbiff/files/app/tns_modules/nativescript-drop-down/drop-down-common.js:37:12) JS: at DropDown.DependencyObservable._onPropertyChanged (/data/data/org.nativescript.dehudbiff/files/app/tns_modules/ui/core/dependency-observable.js:211:13) JS: at DropDown.Bindable._onPropertyChanged (/data/data/org.nativescript.dehudbiff/files/app/tns_modules/ui/core/bindable.js:73:45) JS: at DropDown.ProxyObject._onPropertyChanged (/data/data/org.nativescript.dehudbiff/files/app/tns_modules/ui/core/proxy.js:45:45) JS: at DropDown.View._onPropertyChanged (/data/data/org.nativescript.dehudbiff/files/app/tns_modules/ui/core/view-common.js:625:45) JS: at DropDown.DependencyObservable._setValueInternal (/data/data/org.nativescript.dehudbiff/files/app/tns_modules/ui/core/dependency-observable.js:298:18) JS: at DropDown.DependencyObservable._setValue (/data/data/org.nativescript.dehudbiff/files/app/tns_modules/ui/core/dependency-observable.js:138:14) JS: at DropDown.Object.defineProperty.set as hint JS: at ViewUtil.setPropertyInternal (/data/data/org.nativescript.dehudbiff/files/app/tns_modules/nativescript-angular/view-util.js:201:32) JS: ERROR CONTEXT: JS: [object Object]

My xml:

        <DropDown #ddLanguage
                  row="0"
                  col="7"
                  hint="{{hintLanguages}}" //this
                  [hint]="hintLanguages"  // or that
                  [items]="languages"
                  [selectedIndex]="selectedIndexLanguages"
                  (selectedIndexChange)="onLanguageChanged(ddLanguage.selectedIndex)"
                  class="filterbar-selection"
        ></DropDown>

Thanks :)

[PeterStaev]

Hey @SjurWarEagle , I'm unable to reproduce this problem on my end. Here is my test setup:

dd.html

<StackLayout>
    <StackLayout>
        <DropDown #dd backroundColor="red" [hint]="ddHint" [items]="items" [selectedIndex]="selectedIndex" (selectedIndexChange)="onchange(dd.selectedIndex)"></DropDown>
        <DropDown #dd1 backroundColor="blue" [hint]="ddHint1" [items]="items1" [selectedIndex]="selectedIndex1"></DropDown>
    </StackLayout>
</StackLayout>

dd.component.ts

import {Component} from "@angular/core";

@Component({
    selector: "my-app",
    templateUrl: "dd.html",
    styleUrls: ["app.css"]
})
export class DropDownComponent {
    public selectedIndex;
    public selectedIndex1;
    public items: Array<string> = [];
    public items1: Array<string> = [];
    public ddHint = "Some hint";
    public ddHint1 = "Some hint1";

    constructor() {
        for (var i = 0; i < 5; i++) {
            this.items.push("data item " + i);
            this.items1.push("data 2nd item " + i);
        }
    }

    public onchange(selectedi){
        console.log("selected index " + selectedi);
    }
}

Can you provide more details. Also what version of {N} and Angular do you have in your package.json?

[SjurWarEagle]

Hi, thanks for your reply. This is strange. I put your code in a new page in my app and it worked fine. Then I reactivated my commented out code for the hints in my app and it worked. The next day, it didn't work, both versions didn't.

I'm using nativescript 2.1.1 with android runtimeversion 2.1.1 and angular 2.0.0-rc.3. The page is navigated to by angular routing: { path: "ThePage", component: ThePage}, nothing special.

Currently I'm guessing this is some problem during the page-initilization something timing related.

could you try this code?

  constructor() {
    let that = this;
    setTimeout(() => {
      for (var i = 0; i < 5; i++) {
          this.items.push("data item " + i);
          this.items1.push("data 2nd item " + i);
      }
      that.ddHint = "Some hint";
      that.ddHint1 = "Some hint1";
    }, 1000);
  }

Just for understanding, is there anything speaking against the check in _onHintPropertyChanged? You are checking the existance of "android" in _onItemsPropertyChanged before accessing it and with this check if works fine every time. I forked you project to verify this and it works like charm. I totally can understand the desire to reproduce the problem :) I'm very new to the nativescript world, so there will be something I don't see which speaks against the check. Performance?

[PeterStaev]

Hey @SjurWarEagle , I was able to simulate and fix the problem. It was happening when navigating to a page, and in my first test, the default page container the drop down.

There are no perf issues, I just want to simulate the problem locally so I'm sure the fix will actually fix this. Thanks!

[SjurWarEagle]

@PeterStaev the bugfixes are working fine, may thanks!