Comecei recente com desenvolvimento WEB e tenho estudado ANGULAR para tratar alguns casos no meu trabalho. Tenho cinco opções de select que lista por meio de uma api alguns registros baseados em meu retorno {} , exibidos por minhas interpolações, esses mesmos aparenta normalmente a listagem, porém quando eu uso o evento de click para que seja disparado um evento que chama função da qual consome a api, o mesmo retira os registros da lista deixando somente o item selecionado exibido e sem ter como trocar de elemento dessa lista. Segue o código:
<nb-select placeholder="Regional" style="width:19%" ngModel="result">
<nb-option *ngFor="let i of regional" [value]="i" id="{{i.codigo_regional}}"
(click)="findPendenciaRegional($event)">
{{i.nome_regional}}
</nb-option>
</nb-select>
Função que consome API e pega os dados que são retornados para conseguir popular a lista no HTML:
findPendenciaRegional(event) {
this.pendencia = [];
this.regional = [];
this.pendenciaFisicoApiService.pendencias({
"criterio_de_data": "",
"data_de": "",
"data_ate": "",
"codigo_regional": event.currentTarget.id,
"codigo_comercial": "",
"codigo_loja": "",
"codigo_matriz": "",
"codigo_funcionario": ""
})
.then((s) => {
this.regional = s.agrupado_regional;
this.pendencia = s.dados;
})
.catch((e) => {
console.log(e);
});
}
this.regional
antes de ser modificado e o JSON des.agrupado_regional
. Assim ajuda a gente efetuar testes e ajudar a encontrar o problema.