Skip to main content
adicionou 3 caracteres ao conteúdo
Fonte Link

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

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:

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

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

Campo options limpa após valor selecionado

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:

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