MDB Select is empty despite default


Topic: MDB Select is empty despite default

arolloff asked 6 years ago

I'm initializing my MDB Select instance with a default value, however it is not being selected. I've reviewed the code in the answer to this question, however the specified default still is not working for me.

The select has no selection even though the ngModel value has the expected value and that default value exists in the options list. I've also tried setting the "selected" property on the options and confirmed that it is being correctly set on the desired item, to no avail.

I've included some sample code below to reproduce the problem. Any help would be appreciated.

Thanks!

<list-test.component.html>

<div class="row">
  <divclass="col-sm-6">
    <mdb-select
      name="selectTest"
      [(ngModel)]="selectedOption"
      [options]="optionsSelect">
    </mdb-select>
  </div>
</div>

<list-test.component.ts>

import { Component, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ListTestDataService } from './list-test-data.service';
@Component({
  selector:'app-list-test',
  templateUrl:'./list-test.component.html',
  styleUrls: ['./list-test.component.scss']
})
export class ListTestComponent implements OnInit {
  optionsSelect:Array<any>;
  selectedOption:number;

constructor(private listTestDataService:ListTestDataService) { }

  ngOnInit() {
    this.selectedOption=1;
    this.loadLists();
  }

  loadLists():void {
    this.listTestDataService.getData().subscribe((item:any) => {
      item=item.json();
      this.optionsSelect= [
        { value: item[0].id, label: item[0].name, selected: item[0].id === this.selectedOption },
        { value: item[1].id, label: item[1].name, selected: item[1].id === this.selectedOption },
        { value: item[2].id, label: item[2].name, selected: item[2].id === this.selectedOption },
      ]
    });
  }
}

<list-test-data.service.ts>

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
@Injectable({
  providedIn:'root'
})
export class ListTestDataService {
  url:string='https://jsonplaceholder.typicode.com/users';
  constructor(privatehttp:Http) { }
  getData() {
    returnthis.http.get(this.url);
  }
}

 


ak.leimrey pro answered 6 years ago

Hi,

Sadly, the example on the page doesn't work with async data. Try the notation

[ngModel]="gmaDefaultSelectValue" (ngModelChange)="whenValueChanges($event)"

In my case, it works great. Now I observe the changes I get and deal with them appropriately.

Also, you should change the default-value during the complete:void => callback. If you require more help, I can give you some additional pointers.


arolloff commented 6 years ago

With the changes suggested above, I'm happy to report that the default value is being displayed - thank you! With that said, I'm not sure I fully understand why the two-way ngModel data binding approach doesn't work with async data. I am able to use that approach with a standard HTML select element & *ngFor directive against the same asyncronously loaded data set, which is a common pattern in our Angular solutions. It seems like a gap if the MDB Select does not support something that works with a standard select control.

ak.leimrey pro commented 6 years ago

Hey, arolloff! Glad it worked out for you. Sorry for the late response. Yeah, the standard application of a select box logic lends itself perfectly for async data. I didn't look too deeply into the mdb select box' code, but when I realized it didn't work with the regular shorthand [(ngModel)], I looked into the official documentation. The [(ngModel)] Syntax can ONLY set data values. If we require actual tracking of changes, we are forced to use the aforementioned notation.

Arkadiusz Idzikowski staff answered 6 years ago

Dear arolloff, MDB Select is Pro component, and according to our system you use MDB Free version. Please, provide us a number of your order or registered email to confirm your access to MDB Pro components. Send it to me on email: a.idzikowski@mdbootstrap.com Best, Arek  
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes