Dynamic radio button not checked with angular

Question

I have a radio button that is displayed dynamically 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 to a certain object position the value "checked": true.

In the frontend I take this array of objects and assemble a form of questions and answers. If a question has been answered the degree will return with the value "checked": true gift.

*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 ngModel where it has "checked": true is filled in, but when submitting the form, I lose the reference q needed to persist. Is there any way I can fill the dynamic radio and not lose the position of the list?

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

Answer 1

vc ta using ngModel defines which you want to be marked by changing the value of ngModel to what you want.