如何根据与之关联的ngModel检查单选按钮 [英] How to check a Radio Button based on the ngModel it is associated with

问题描述

我正在编写一个简单的Angular 7页面，其中包含2个单选按钮和一个Text Input.页面加载时，ngOnInit方法执行对数据库的调用，并检索一些应该反映在单选按钮和文本输入"上的数据. 我无法根据从数据库中检索到的值来确保在打开页面时选择了单选按钮".

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

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

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

      });*/
  }
}

基本上，唯一的问题是，根据"pegarDados()"函数从数据库检索到的内容，页面加载时我无法检查相应的单选按钮.

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.

推荐答案

使用value="0"设置单选按钮值时，会将其设置为字符串"0"，该字符串与绑定到该字符串的数字值不匹配.输入字段.要将单选按钮的值设置为数字，请使用方括号表示法:[value]="0".

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

另请参阅此stackblitz 演示.

这篇关于如何根据与之关联的ngModel检查单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！