NbSelect doesn't display the [selected] option if data is dynamic

Issue type

I’m submitting a … (check one with “x”)

bug report
feature request

Issue description

Current behavior: I have a NbSelect populated with options from the database. Neither using [selected] or ([ngModel]) makes it display the selected value. As soon as I pass static data it works as intended.

Expected behavior: It should automatically select the selected option.

Steps to reproduce: Put NbSelect on page, have a simple MySQL database to support the exchange of data, take the data and put them as options.

Related code: Unfortunately since it requires my localhost mySQL here, I can’t provide a stackblitz, but I can include some snippets.

header.component.html

<nb-select (selectedChange)="changeLang($event)" ([ngModel])="selectedLang">
    <nb-option *ngFor="let lang of languages" [value]="lang">{{ lang.short }}</nb-option>
  </nb-select>

header.component.ts

service.exp.subscribe((exp: any) => {
      this.languages = exp.langs.map(x => {
        return {
          short: x.short,
          name: x.name
        }
      });

      this.selectedLang.next(this.languages.filter(x => x.short === translate.currentLang)[0]);
    });

header.service.ts

this.server.getLangsList().subscribe((langs: any) => {
        this.exp.next({
          langs: langs
      });
    });

server.service.ts

getLangsList() {
    return this.request('GET', `http://localhost:8080/langs`);
    //return of([{"idLang":1,"short":"en","name":"English","dateFormat":"YYYY-MM-DD","dateTimeFormat":"YYYY-MM-DD HH:mm:ss"}]);
  }

Now, in the last snippet, the two rows return the same Observable. In the caso of the second (static data) it displays the [selected] value correctly, in the first it doesn’t.

I’m not sure it’s related to the issue 2088, so I started a new issue #2088

Other information:

npm, node, OS, Browser

Node version 10.16.0
npm version 6.10.3
Windows 10, on Chrome

Angular, Nebular

ngx-admin v4.0.1, nebular v4.1.2

Issue Analytics

State:
Created 4 years ago
Reactions:18
Comments:20 (1 by maintainers)

Top GitHub Comments

9reactions

ironsm4shcommented, Jan 17, 2021

I have used @shireefadel’s workaround as follows:

in the html, add a #select on the nb-select element.

<nb-select fullWidth multiple formControlName="mySelected" #select>

Add an angular viewchild to the nb-select element

@ViewChild('select') selectElem: NbSelectComponent;

Add a workaround timeout and call it when the dynamic content changes

changeMyDynamicContent() {
  ...Logic here...

  setTimeout(() => {
    if (this.selectElem) {
      const selectedOptions: NbOptionComponent[] = [];
      for (const option of this.selectElem.options['_results']) {
        if (mySelected.includes(option.value)) {
          selectedOptions.push(option);
        }
      }
      for (const option of selectedOptions) {
        this.selectElem['selectOption'](option);
      }
      this.selectElem['cd'].detectChanges();
    }
  }, 500);
}

This is extremely dirty, but it will work until this bug is fixed.

6reactions

rardila-uniajccommented, Apr 14, 2021

I have used @shireefadel’s workaround as follows:

in the html, add a #select on the nb-select element.
<nb-select fullWidth multiple formControlName="mySelected" #select>
Add an angular viewchild to the nb-select element
@ViewChild('select') selectElem: NbSelectComponent;
Add a workaround timeout and call it when the dynamic content changes
changeMyDynamicContent() {
  ...Logic here...

  setTimeout(() => {
    if (this.selectElem) {
      const selectedOptions: NbOptionComponent[] = [];
      for (const option of this.selectElem.options['_results']) {
        if (mySelected.includes(option.value)) {
          selectedOptions.push(option);
        }
      }
      for (const option of selectedOptions) {
        this.selectElem['selectOption'](option);
      }
      this.selectElem['cd'].detectChanges();
    }
  }, 500);
}
This is extremely dirty, but it will work until this bug is fixed.

thanks, it helped me a lot to create a generic function

static setOptionNbSelect(selectComponent: NbSelectComponent, optToCompare: any) {
    setTimeout(() => {
        if (selectComponent) {
            const selectedOptions: NbOptionComponent[] = [];
            for (const option of selectComponent.options['_results']) {
                if (_.isEqual(optToCompare, option['value'])) {
                    selectedOptions.push(option);
                    break;
                }
            }
            for (const option of selectedOptions) {
                selectComponent['selectOption'](option);
            }
            selectComponent['cd'].detectChanges();
        }
    }, 500);
    
}

I hope it works for someone else. Thanks again @ironsm4sh

Top Results From Across the Web

How to set a preselected option with Nebular, nb-select

There exists an issue with dynamic data, but with static data, it works as described in the documentation you mentioned: HTML: <nb-select ......

Select Angular UI Component - Nebular - GitHub Pages

Options in the select may be grouped using nb-option-group component. Grouping ... Select may have a placeholder that will be shown when nothing...

SQL Report Function - B1 Usability Package

IF IT IS NOT THAT YOU WILL GET A BAD VALUE ERROR SETTING THE VALUES. As you can see the normal Close-button is...

E Select Default Value - StackBlitz

<nb-layout-column>. <nb-select [(selected)]. ="selectedOption">. <nb-option *ngFor="let o of. options" [value]="o">. {{ o.name }}. </nb-option>. </nb-select>.

angular select does not load my selected option | Nerd For Tech

When navigating to the next page and then back to the main page, we can see that the data is stored correctly and...