Topic: mdb-select async data not working (binding problem?)

ufasoli pro asked 5 years ago


Hello,

I'm using MDB Pro Angular 6.1.6 and I'm having an issue with a simple select, if my options are static data it all works fine however as soon as I request data from a web service the select is always empty, it looks like the binding is not properly done.

Below is the code snippets for the pertinent code, I tried a few things but I cannot get it working unless it's static data, am I doing something wrong? as this seems a pretty standard functionality to me

HTML

<form #searchForm="ngForm" (ngSubmit)="doSearch()">

<div class="row m-2 form-group" *ngIf="depots">
<div class="col-sm-6 " *ngIf="depots">
<mdb-select [(ngModel)]="search.fromDepotSelect"
id="fromDepot" name="fromDepot" [options]="depots" title="Dépôt de début" mdbWavesEffect>
</mdb-select>
<label class="mr-sm-2" for="fromDepot">Dépôt début:</label>
</div>

<div class="col-sm-6" *ngIf="depots">
<mdb-select [(ngModel)]="search.toDepotSelect"
id="destinationDepot" [options]="depots" name="destinationDepot" title="Dépôt de fin" mdbWavesEffect>
</mdb-select>
<label class="mr-sm-2" for="destinationDepot">Dépôt fin:</label>
</div>
</div>

Component
export class AffectationsComponent implements OnInit {

depots: any[];

constructor(private blockService: BlockService, private depotService: DepotService) {
}

ngOnInit() {
this.depotService.findAll().subscribe(depots => {

    this.depots = [];
  depots.forEach( d => {
    this.depots.push({value: d.id, label: d.displayName});
    console.log(d.displayName);
  });

  }
);
}

And finally this is the code in the service :

findAll(): Observable<Depot[]> {
  return this.http.get<Depot[]>(AppSettings.DEPOT_API_URL);
}

Pankaj charpe free answered 4 years ago


Hi, I have solved the problem in following way.

roleOptions: Array;
 ngOnInit() {
    this.roleOptions = [];
    this.getRoleList();
  }
 getRoleList() {
    this.rolePrivilegeService.getRoleList().subscribe((data: any) => {
      let i = 0;
      data.forEach((el: any) => {
        this.roleList.push({
        id: el.id,
        name: el.name,
        privilegeList: el.privileges
      });
        this.roleOptions = [...this.roleOptions, {value: i.toString(), label: el.name}];
        i++;
      });
      });
  }

farawayslv free answered 4 years ago


I have the same issue with options into mdb-select.Damian not exactly reproduced first Angular script and his example worked fine. But when we try create select data dynamic using for/map/forEach options doesn't show.This will work: this.optionsSelect= [

{ value: item[0].name, label: item[0].name },

{ value: item[1].name, label: item[1].name },

{ value: item[2].name, label: item[2].name },

];But this already not work item.map(v => { this.optionSelect.push({ value: v.id, label: v.name });})

I resolved issue using one more variable:const data = []; item.map(v => { data.push({ value: v.id, label: v.name });}) this.optionSelect = data;Its work as due, but this is very strange behavior...


Arkadiusz Idzikowski staff commented 4 years ago

It is expected behavior. Angular won't recognize the change in the options input when you just push new values to the array. The change detection mechanism will be triggered only when you pass new array to the input.


Damian Gemza staff answered 5 years ago


Dear ufasoli, I have tried to reproduce you case, but for me everything is okay. I have used this fake API to get the data: https://jsonplaceholder.typicode.com/users Created a simple service which get data from API. Here's it's code:
import { Http } from '@angular/http';

import { Injectable } from '@angular/core';

@Injectable({

providedIn:'root'

})

export class DataService {

url: string = 'https://jsonplaceholder.typicode.com/users';

constructor(private http: Http) { }

getData() {

return this.http.get(this.url);

}

}
Then i have used it in my app.component to populate Material Select source array with data acquired from API:
import { DataService } from './data.service';

import { Component, OnInit } from '@angular/core';

@Component({

selector:'app-root',

templateUrl:'./app.component.html',

styleUrls: ['./app.component.scss'],

})

export class AppComponent implements OnInit {

optionsSelect:Array<any>;

constructor(private dataService: DataService) { }

ngOnInit() {

this.dataService.getData().subscribe((item:any) => {

item = item.json();

this.optionsSelect= [

{ value: item[0].name, label: item[0].name },

{ value: item[1].name, label: item[1].name },

{ value: item[2].name, label: item[2].name },

];

});

}

}
And for me everything is okay. Could you please try to reproduce your case with my code? Best Regards, Damian

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: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags