Topic: mdb-select async data not working (binding problem?)
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);
}
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);
}
}
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 },
];
});
}
}
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 5 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.
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++;
});
});
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No