I'm trying to build a dynamic combo with Angular, but I'm not having success, I was able to implement with static values, but I was not successful when I was adapting it with my Java API that has connection to the database. >
My goal is to load a dropdown list from a state of Brazil so it can automatically load the second dropdown list of cities in Brazil corresponding to that state of Brazil that was selected in the first dropdown list.
NOTE: The data that is in my local database I enter the city and states with insert in the database.
Through facebook I found this example of dynamic combo with static data to understand what I need:
The practical effect is in the 21 minutes and 38 seconds of this video.
The example with static data is having this type of return;
this.cidadesService.buscarEstados().subscribe(result => {
console.log(this.estados = result);
});
It was like this;
Anditbecamesowithcities;
buscarCidades(){this.cidadesService.buscarCidadePorUF(this.uf).subscribe(result=>{console.log(this.estados=result);});}Itlookslikethis:
Andso:
Therepositorywithstaticdatahasthusbeendone, Click Here
But when I was able to adapt it to handle data from my Java API I did not succeed, it's this error message you're giving.
Mycomponentlookslikethis;
import{Estado,Cidade}from'./../../core/model';import{CidadesService}from'./../cidades.service';import{Component,OnInit}from'@angular/core';@Component({selector:'app-cidades-pesquisa',templateUrl:'./cidades-pesquisa.component.html',styleUrls:['./cidades-pesquisa.component.css']})exportclassCidadesPesquisaComponentimplementsOnInit{codigo:string;cidadePorEstado:string;estados=newEstado();cidades=newCidade();constructor(privatecidadesService:CidadesService){}ngOnInit(){this.cidadesService.buscarEstados().subscribe(result=>this.estados=result);this.pesquisarCidades();this.pesquisarEstado();}pesquisarCidades(){this.cidadesService.listarTodasCidades().then(()=>null);}pesquisarEstado(){this.cidadesService.listarTodosEstados().then(()=>null);}buscarCidades(){this.cidadesService.buscarCidadePorUF(this.codigo).subscribe(result=>this.cidades=result);}}Theservicelookslikethis:
import{Cidade,Estado}from'./../core/model';import{Injectable}from'@angular/core';import{Http,URLSearchParams,Headers}from'@angular/http';import{Observable}from'rxjs/Observable';import'rxjs/add/observable/of';@Injectable()exportclassCidadesService{cidadesUrl='http://localhost:8080/cidades';estadosUrl='http://localhost:8080/cidades/estados';constructor(privatehttp:Http){}listarTodasCidades():Promise<any>{returnthis.http.get(this.cidadesUrl).toPromise().then(response=>response.json());}listarTodosEstados():Promise<any>{returnthis.http.get(this.estadosUrl).toPromise().then(response=>response.json());}buscarEstados():Observable<any>{returnObservable.of([this.listarTodosEstados()]);}buscarCidadePorUF(codigo:string):Observable<any>{if(codigo==='codigo_estado'){returnObservable.of([this.listarTodasCidades()]);}else{returnObservable.of([]);}}}Andmypagelookslikethis;
<divclass="container">
<select name="estado" id="estado" [(ngModel)]="codigo" (change)="buscarCidades()">
<option *ngFor="let estado of estados" [value]="estado.codigo">{{estado.nome}}</option>
</select>
<select name="cidade" id="cidade" [(ngModel)]="cidadePorEstado">
<option *ngFor="let cidade of cidades" [value]="cidade.cidadePorEstado">{{cidade.nome}}</option>
</select>
<br>
<br>
<br> UF Selecionada: {{codigo}}
<br>
<br> IBGE Selecionado: {{cidadePorEstado}}
</div>
I did a test and my Angular API is getting the GET of the state and cities see;
listarTodasCidades(): Promise<any> {
return this.http.get(this.cidadesUrl)
.toPromise()
.then(response => {
console.log(response.json());
});
}
It looks like this:
StateE:
listarTodosEstados():Promise<any>{returnthis.http.get(this.estadosUrl).toPromise().then(response=>{console.log(response.json());});}Itlookslikethis;
Noticethatheiscallingtwice;
Myrepositorylookslikethis, Click here
I do not know how to solve this problem, I accept suggestions;
My database looked like this:
cities
State
============UPDATE=======================
Iwasdirectedtomakethefollowingmodifications;
Thecomponent:
import{Estado,Cidade}from'./../../core/model';import{CidadesService}from'./../cidades.service';import{Component,OnInit}from'@angular/core';@Component({selector:'app-cidades-pesquisa',templateUrl:'./cidades-pesquisa.component.html',styleUrls:['./cidades-pesquisa.component.css']})exportclassCidadesPesquisaComponentimplementsOnInit{codigo:string;cidadePorEstado:string;estados:Estado[]=[];cidades:Cidade[]=[];constructor(privatecidadesService:CidadesService){}ngOnInit(){//Aquivcsóprecisachamaraconsultadeestadosparacarregaroselectdeestadoe//apesquisadecidadesódeveocorrernochangedoselectdeestadothis.cidadesService.buscarEstados().subscribe(result=>this.estados=result);//entãoessesdoismétodosnãoexiste//this.pesquisarCidades();//this.pesquisarEstado();}/*NãoprecisadessesmétodospesquisarCidades(){this.cidadesService.listarTodasCidades().then(()=>null);}pesquisarEstado(){this.cidadesService.listarTodosEstados().then(()=>null);}*/buscarCidades(){this.cidadesService.buscarCidadePorUF(this.codigo).subscribe(result=>this.cidades=result);}}Theservice;
import{Cidade,Estado}from'./../core/model';import{Injectable}from'@angular/core';import{Http,URLSearchParams,Headers}from'@angular/http';import{Observable}from'rxjs/Observable';@Injectable()exportclassCidadesService{cidadesUrl='http://localhost:8080/cidades';estadosUrl='http://localhost:8080/cidades/estados';constructor(privatehttp:Http){}buscarEstados():Observable<any>{returnthis.http.get(this.estadosUrl);}buscarCidadePorUF(codigo:string):Observable<any>{//Aquiseuendpointtemquereceberoparâmetrocodigodoestadoejáretornarfiltrado,ficariaassim:returnthis.http.get('${this.cidadesUrl}&codigoEstado=${codigo}');//Agoracaraseuendpointnãoestiverpreparadoparafiltrarascidadesporestadovcusaocódigoabaixoelanoseucomponentedecidades-pesquisavctemquefiltrarporestado;//returnthis.http.get(this.cidadesUrl);}}Iamfacingthefollowingerror:
Seemoredetail:
Thenfindoutthatmyproblemiswrong:
EXCEPTION: Response with status: 200 Ok for URL:
So I found this site to solve my problem:
Because of this I decided to install it with the command below;
npm install jsonp
See the code before:
import { Cidade, Estado } from './../core/model';
import { Injectable } from '@angular/core';
import { Http, URLSearchParams, Headers } from '@angular/http';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class CidadesService {
cidadesUrl = 'http://localhost:8080/cidades';
estadosUrl = 'http://localhost:8080/cidades/estados';
constructor(private http: Http) { }
buscarEstados(): Observable<any> {
return this.http.get(this.estadosUrl);
}
buscarCidadePorUF(codigo: string): Observable<any> {
// Aqui seu endpoint tem que receber o parâmetro codigo do estado e já retornar filtrado, ficaria assim:
return this.http.get('${this.cidadesUrl}&codigoEstado=${codigo}');
// Agora cara seu endpoint não estiver preparado para filtrar as cidades por estado vc usa o código abaixo e la no seu componente de cidades-pesquisa vc tem que filtrar por estado;
//return this.http.get(this.cidadesUrl);
}
}
And the code after the modification:
import { Cidade, Estado } from './../core/model';
import { Injectable } from '@angular/core';
import { Http, URLSearchParams, Headers, Jsonp } from '@angular/http';// modificação foi aqui!
import { Observable } from 'rxjs/Observable';
@Injectable()
export class CidadesService {
cidadesUrl = 'http://localhost:8080/cidades';
estadosUrl = 'http://localhost:8080/cidades/estados';
constructor(private jsonp: Jsonp) { }// modificação foi aqui!
buscarEstados(): Observable<any> {
return this.jsonp.get(this.estadosUrl);// modificação foi aqui!
}
buscarCidadePorUF(codigo: string): Observable<any> {
return this.jsonp.get('${this.cidadesUrl}&codigoEstado=${codigo}'); // modificação foi aqui!
}
}
There he generated this other error:
From what I understand, I may be wrong, he wants me to change from HttpModule to JsonpModule , but if I do this I will have to change my whole project using HttpModule it's kind of complicated because my project is a little big.