How to check a Radio Button based on the ngModel it is associated with

问题

I'm writing a simple Angular 7 page which contains 2 radio buttons and one Text Input. When the page loads, the ngOnInit method executes a call to a database and retrieves some data that should be reflected on the radio buttons and Text Input. I'm not being able to make it that the Radio Button are selected when the page opens based on the value that is retrieved from the database.

app.component.html

<label>Descrição adicional</label>
<br />
<input type="text" [(ngModel)]="metadata.dscStatusSul" />
<!--this input text simply shows the value stored in the database column "dscStatusSul" which is a string-->
<br />
<label>Código do funcionamento</label>
<br /><input type="text" [(ngModel)]="metadata.numStatusSul" />
<!--this input text simply shows the value stored in the database column "numStatusSul" which is a number varying between 1 and 0 -->
<div class="col-md-4">
    <label>
        <input [(ngModel)]="metadata.numStatusSul" type="radio" name="rdoResult" value="0" />
        <!--this radio button should be checked when the page loads when the value retrieved from the database is 0 -->
        Operação Normal
    </label>
    <label>
        <input [(ngModel)]="metadata.numStatusSul" type="radio" name="rdoResult" value="1" />
        <!--this radio button should be checked when the page loads when the value retrieved from the database is 1 -->
        Operação Intermitente
    </label>
</div>
<br />
<button (click)="salvarDados()">Salvar</button>
<!-- this a button that sends a request to the database to update the data that was retrieved-->

app.component.ts

import { Component, OnInit } from '@angular/core';
import { AppApi } from './app-api';
import Metadata from './Metadata';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [AppApi]
})
export class AppComponent implements OnInit {

  private metadata: Metadata;


  constructor(private appApi: AppApi) {
    this.metadata = new Metadata('', '', '', '', '', '', 0, 0, 0, 0, 0, 0); //this creates a new empty blank object to store the retrieved data
  }

  ngOnInit() {
    this.pegarDados(); //this line calls the method that gets the initial data from the database
  }

  pegarDados() { //this method makes a request to the database and then saves the data to the "metadata" object.
    this.appApi.getConfig().toPromise()
      .then((res) => {
        console.log('Pegou os dados');
        this.metadata = res[0];
      })
      .catch((err) => {
        console.log('Erro:');
        console.log(err);
      });
  }

  salvarDados() {//This method is supposed to make a request to the database and update the existing data with the data that was changed in the HTML page.

    console.log('Teste Salvar Dados');
    //curently it only displays the new data in the console. The data being shown here is compatible with what is selected in the HTML page.
    console.log(this.metadata.dscStatusSul);
    console.log(this.metadata.numStatusSul);

    /*this.appApi.setConfig(this.metadata).toPromise()
      .then((res) => {
        console.log('Chegou aqui');
        this.metadata = res[0];
        console.log(this.metadata);
      })
      .catch((err) => {
        console.log('Erro:');
        console.log(err);

      });*/
  }
}

Basically, the only problem is I can't check the corresponding Radio Button when the page loads based on what is retrieved from the database by the "pegarDados()" function.

回答1:

When you set the radio button value with value="0", you are setting it as the string "0", which does not match the numeric value bound to the input field. To set the radio button value as a number, use the bracket notation: [value]="0".

<input [(ngModel)]="metadata.numStatusSul" type="radio" name="rdoResult" [value]="0" />
<input [(ngModel)]="metadata.numStatusSul" type="radio" name="rdoResult" [value]="1" />

See this stackblitz as a demo.

来源：https://stackoverflow.com/questions/54696304/how-to-check-a-radio-button-based-on-the-ngmodel-it-is-associated-with