ng-select is not displaying the bindLabel value

Question

Ng-select is not displaying bindLabel value to the client. There is not a single Error as well. I have a couple of ng-select dropdowns. and It is showing value in one Dropdown in one div. However, even if I am using the same dropdown in another div it is not showing that value.

This is my dropdown for one div:

<div class="col-12 col-sm-12 col-md-4 m-auto mt-2">
<ng-select [items]="immigrationOptions" placeholder="Immigration Status" bindLabel="immigration_s_name"
bindValue="id" [ngClass]="{ 'is-invalid': submitted && f.immigration_status_id.errors }" appendTo="body" [virtualScroll]="true" formControlName="immigration_status_id"             [(ngModel)]="immigrationOption" aria-describedby="cnt_immigration_status_id">
     </ng-select>
    <small id="cnt_immigration_status_id" class="form-text text-muted">Immigration Status</small>
    <div *ngIf="submitted && f.immigration_status_id.errors" class="invalid-feedback">
   <div *ngIf="f.immigration_status_id.errors.required">Immigration status is required</div>
</div>
</div>

I am using the same dropdown twice. However, it is not displaying label's to the user in the second dropdown of another div

Please check the attached screenshot as well.

This is not showing any value in the dropdown. This is showing Values in dropdown:

Audiology

Is the data from some API endpoint? Also, how is immigrationOptions structured like? Can you give a sample of how the data is structured? – Goldsmith

Answer 1

This same thing happened to me today:

ng-select uses an item array to show options via a binding like this: [items]='itemArray'. This is how users select an option when first filling out a form (as we already know). When the data is saved the back-end only stores the selected item.

When the form is reused to review the record and possibly edit again, that same items array must not be empty. If it is, the selected option will not show. Angular doesn't issue any warnings and doesn't care.

Take Away : Whether user edits for the first time, or reading back content from the data store to review and then edit, make sure the items array has content.

Lipinski

Answer 2

This is related to change detection: Ng-select component implements OnPush change detection which means the dirty checking checks for immutable data types. That means if you do object mutations like:

this.items.push({id: 1, name: 'New item'})

Component will not detect a change. Instead you need to do:

this.items = [...this.items, {id: 1, name: 'New item'}];

This will cause the component to detect the change and update. Some might have concerns that this is a pricey operation, however, it is much more performant than running ngDoCheck and constantly diffing the array.

You can refer the following link: https://www.npmjs.com/package/@ng-select/ng-select

Candycecandystriped

Answer 3

I know it might look strange but sometimes changing name to title or vice versa, works for me! try using

bindLabel="immigration_s_title"

Cringe

Answer 4

i Use this exmple so my items are in this list selectCompany

<div class="col-12 col-md-4">
              <fieldset class="form-group">
                <ng-select
                  [items]="selectCompany"
                  [(ngModel)]="selectedCompanies"
                  name="selectedCompanis"
                  bindLabel="name"
                  placeholder="Select Company"
                  (change)="filterByCompanies($event)"
                ></ng-select>enter code here
              </fieldset>
            </div>

this.selectCompany.push({ name: record, value: record }) cahnge to this.selectCompany = [... this.selectCompany, { name: record, value: record }]; worked for me

Angling