Dynamic radio button is not checked with angle

0

I have a radio button that is dynamically displayed according to the json below:

    {
    "cd_pauta": 64,
    "nr_numeracao": 10,
    "cd_subtipo_pauta_periodo_letivo": 1,
    "ds_observacao": "Mbappe > que Neymar?",
    "sg_conteudo": "trt",
    "pauta_conteudo": "Mbappe > que Neymar? (Teste cabuloso)",
    "grau": [
        {
            "cd_grau_atitudinal": 2,
            "nm_grau_atitudinal": "BOM",
            "sg_grau_atitudinal": "B",
            "vl_grau_atitudinal": "0",
            "cd_configuracao_grau_periodo_letivo": 2
        },
        {
            "cd_grau_atitudinal": 3,
            "nm_grau_atitudinal": "RUIM",
            "sg_grau_atitudinal": "R",
            "vl_grau_atitudinal": "24",
            "cd_configuracao_grau_periodo_letivo": 3,
            "checked": true,
        },
        {
            "cd_grau_atitudinal": 1,
            "nm_grau_atitudinal": "MUITO BOM",
            "sg_grau_atitudinal": "MB",
            "vl_grau_atitudinal": "100000",
            "cd_configuracao_grau_periodo_letivo": 1
        }
    ]
}

And according to what is in the database, my backend concatenates a value of "checked": true.

In the frontend I get this array of objects and put together a question and answer form. If a given question has been answered the grade will return with the value checked: true present.

*ngFor="let pauta of pautas; let i = index;">
  <div class="item item-1" fxFlex="15%"  fxFlexOrder="1" class="conteudo-pauta">{{pauta.nr_numeracao}}</div>
  <div class="item item-2" fxFlex="30%" fxFlexOrder="2" class="conteudo-pauta">{{pauta.pauta_conteudo}}</div>
  <div class="item item-3" fxFlex  fxFlexOrder="3" class="conteudo-pauta">
    <div class="alinhar-grau">
      <div *ngFor="let grau of pauta.grau; let j = index;" class="graus">
        <input 
        [(ngModel)]="options[pauta.cd_subtipo_pauta_periodo_letivo]"
        value="{{pauta.cd_subtipo_pauta_periodo_letivo}}-{{grau.cd_grau_atitudinal}}"
        name="option{{pauta.cd_subtipo_pauta_periodo_letivo}}"
        [attr.checked]="grau.checked === true ? 'checked' : ' ' "
        type="radio"
        /> {{grau.sg_grau_atitudinal}}
          <div>
            -> {{options[pauta.cd_subtipo_pauta_periodo_letivo]}}
          </div>
      </div>
    </div>
  </div>
</div>

The problem is that regardless of the status the radio is never filled. I noticed that when removing the ngModel where it has "checked": true is filled in, but when I submit the form, I lose the reference I need to persist. Is there any way I can fill out the dynamic radius and not lose track of the list?

It should look like this, but the bad value was to be filled.

    
asked by anonymous 23.10.2018 / 21:02

0 answers