Question

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

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

      });*/
  }
}

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

Answer 1

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

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

请参见this stackblitz作为演示。

如何根据与之关联的ngModel检查单选按钮

1 个答案: