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

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);
}

Add comment

Pankaj charpe free answered 4 years ago

0 0 Best answer

Please insert min. 20 characters.

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++;
      });
      });
  }

Add comment

farawayslv free answered 4 years ago

0 0 Best answer

Please insert min. 20 characters.

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.

Add comment

Damian Gemza staff answered 5 years ago

0 0 Best answer

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:
<div>
<pre>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);

}

}</pre>
</div>
Then i have used it in my app.component to populate Material Select source array with data acquired from API:
<div>
<pre>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 },

];

});

}

}</pre>
</div>
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.

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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

ufasoli

Pro User 10Support score
3Questions 1Answers 0Snippets