Boa tarde :)
Estou tentando fazer um formulário semelhante a esse da aula para complementar o estudo de consumo de API, então usei a API de estados brasileiros do IBGE (https://servicodados.ibge.gov.br/api/v1/localidades/estados) e gostaria de fazer tipo uma seleção dropdown para exibir o nome dos estados para o usuário selecionar. Mas o código está com algum erro que não consigo entender (acho que é mau uso da diretiva NgFor, mas mesmo assim não estou conseguindo corrigir)... Ao invés de aparecer um dropdown com todos os estados, está gerando um monte de menus, cada um deles exibe um único estado da API. Se alguém conseguir me ajudar... o código está abaixo:
Service:
import { Estado } from './../components/cidade-estado/estado';
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class ConsultaEstadoService {
private readonly url_API_estados = 'https://servicodados.ibge.gov.br/api/v1/localidades/estados'
constructor(private http: HttpClient) { }
listarEstados(){
return this.http.get<Estado[]>(this.url_API_estados);
}
}Interface Estado:
export interface Estado {
id?: number
sigla?: string
nome?: string
};
Componente:
import { ConsultaEstadoService } from './../../services/consulta-estado.service';
import { Component, OnInit } from '@angular/core';
import { Estado } from './estado';
@Component({
selector: 'app-cidade-estado',
templateUrl: './cidade-estado.component.html',
styleUrls: ['./cidade-estado.component.scss']
})
export class CidadeEstadoComponent implements OnInit {
estados?: Estado[];
constructor(private service: ConsultaEstadoService){
}
ngOnInit(){
this.service
.listarEstados()
.subscribe(resultado => this.estados = resultado);
}
}Template: Obs.: estou utilizando DevExtreme só para fins de estilização mesmo.
<div>
<div>
<p>Estado:</p>
<dx-select-box *ngFor="let estado of estados"
[items]="[{nome: estado.nome}]"
displayExpr="nome"
placeholder="Selecione o Estado..."
[showClearButton]="true"
></dx-select-box>
</div>Muito obrigada!
