Clear options field after selected value

Asked

Viewed 106 times

0

I started recently with WEB development and have studied ANGULAR to deal with some cases in my work. I have five select options that lists through an api some records based on my return {} , displayed by my interpolations, these same ones usually appear to list, but when I use the click event to trigger an event that calls a function from which it consumes the api, it removes the records from the list leaving only the selected item displayed and without having to change the element from that list. Follows the code:

<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> 

Function that consumes API and takes the data that is returned to get popular list in 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);
      });
  }
  • Put the code findPendenciaRegional()

  • I edited it so it would display correctly.

  • Check for me, please. Your code generates a list that populates the select, when you click this select it must download new data and fill the select with new data, this is it?

  • Also put there the JSON of this.regional before being modified and the JSON of s.agrupado_regional. So it helps us run tests and help us find the problem.

  • It generates the list to fill the select, when I click it fetches me the records that is caught by event.currentTarget.id I wish that after the data was returned, I could again select another name to perform other searches... Even because I still have to implement a filter in order to return me based on a business rule, only certain names. I can’t post because it’s an extended size.

  • Well, is the query overriding your select values, is this your intention or is it an encoding failure? 2º Put there at least 3~5 items of the values I asked for. Otherwise it is difficult to try to help by "direction"/osmosis/spiritual power.

  • The intention is to return me after clicked, only the values of the function that consumes the API. But in select continue giving options I can select another name, understand? return: JSON&#xA; { "agrupamento_regional:&#xA; [ { "codigo_comercial": 244&#xA;, "nome_comercial": "BRUNA FERNANDA CARLOTA ALVES" &#xA;}&#xA; ], &#xA;&#xA; "dados: [&#xA; {&#xA;&#xA; "codigo_convenio": 1911,&#xA; "codigo_instituicao": 35,&#xA; "codigo_matriz": 161,&#xA; "codigo_regional": 29,&#xA;&#xA;} &#xA;

  • No, I didn’t get it right. You need to enter new values in select according to the data coming from the API?

  • No. The select is only to return according to business rule. I have 4 more select which are from other views. It’s like a filter. If I select Leonardo Getulio who is a regional X, will return me the information of Leonardo Getulio, regional X with the pending Y.

  • Then there is a flaw in your code, read carefully: in the option you loop "for" in the "regional" array that is filled with the values you want in the select. When you click on an option, you trigger "findPendenciaRegional()" which changes the value "this.regional" which is the select model by changing the select indirectly by removing its previous values.

  • You should manipulate the result of "findPendenciaRegional" in another variable without being "regional".

  • That’s exactly what it was, good! I just need to see how I’m going to filter it now. But thank you!

  • What is the logic of your filter?

  • First return the or (the) values selected, since I declared the fields as multiple. The API already returns me "filtered" if I pass the appropriate code.

  • Your message was not complete enough for me to provide you with a solution, it would be ideal for you to say something like: I receive an array with the fields x, y and z, and I would like to filter those that the field y is equal to the value "valueEmployment". If you have filter via API and it is enough for you I strongly suggest using.

  • Fair. I have the 5 select with the options being list according to the function of findPendenciaRegional. By level would be: Regional, Commercial, Headquarters, Store and Employee. What I meant is that the API brings me values if I pass parameters, for example: &#xA;{&#xA; "criterio_de_data": "",&#xA; "data_de": "",&#xA; "data_ate": "",&#xA; "codigo_regional":"29",&#xA; "codigo_comercial":"",&#xA; "codigo_loja": "",&#xA; "codigo_matriz":"",&#xA; "codigo_funcionario":""&#xA;}&#xA;

  • the return would be: { "grouped commercial": [ { "commercial code": 244, "commercial name": "BRUNA FERNANDA CARLOTA ALVES" } ],

  • If I do not pass parameter in the API call, it returns all the codes of all my select (the regional, commercial, function...) This is identified by the token that determines the views. But there is a general one that can go filtering, to each selection that is called by the code of each agent, whether commercial, regional etc... So each agent has his responsibility determined and by him is identified by the code "agent", this I could not take to put in select and filter.

Show 13 more comments

1 answer

0


When the findPendenciaRegional() method is called, you clear the Array that is used in ng for.

this.regional = [];
  • This remark I had already told him in another post. Maybe it’s part of his business logic.

  • has q see what is coming in this.regional = s.agrupado_regional; then.

  • This.regional when I debug is only populated when I select some options within select. It returns me a json with: { "regional grouping: [ { "commercial code": 244, "commercial name": "BRUNA FERNANDA CARLOTA ALVES" } ], "data: [ { return that with excess of possible lines to post here. } ]

  • The problem is that you are changing the value of the regional variable in the findPendenciaRegional(Event) method and you use that same variable to iterate in *ngFor="Let i of regional". Get it? What you can do is isolate these variables, make a call that populates this variable that you iterate in ngFor and use another in findPendenciaRegional() {}. I don’t know if I made myself clear, to help you better we need to know the pq of you change the value of the regional in the findPendenciaRegional() and such.

  • Got it. It worked. The problem now is in the same filtering issue, as I reported to Leonardo.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.