如何根据与其关联的 ngModel 检查单选按钮 [英] How to check a Radio Button based on the ngModel it is associated with
问题描述
我正在编写一个简单的 Angular 7 页面，其中包含 2 个单选按钮和一个文本输入.当页面加载时，ngOnInit 方法执行对数据库的调用并检索一些应反映在单选按钮和文本输入上的数据.根据从数据库中检索到的值，我无法在页面打开时选择单选按钮.
app.component.html
<br/><input type="text" [(ngModel)]="metadata.dscStatusSul"/><!--此输入文本仅显示存储在数据库列dscStatusSul"中的值，它是一个字符串--><br/><label>Código do funcionamento</label><br/><input type="text" [(ngModel)]="metadata.numStatusSul"/><!--此输入文本仅显示存储在数据库列numStatusSul"中的值，该值是一个在 1 和 0 之间变化的数字 --><div class="col-md-4"><标签><input [(ngModel)]="metadata.numStatusSul" type="radio" name="rdoResult" value="0"/><!--当从数据库中检索到的值为 0 时，页面加载时应选中此单选按钮 -->普通歌剧院<标签><input [(ngModel)]="metadata.numStatusSul" type="radio" name="rdoResult" value="1"/><!--当从数据库中检索到的值为 1 时，页面加载时应选中此单选按钮 -->中场歌剧院<br/><button (click)="salvarDados()">Salvar</button><!-- 这是一个向数据库发送请求以更新检索到的数据的按钮-->
app.component.ts
import { Component, OnInit } from '@angular/core';从 './app-api' 导入 { AppApi };从'./Metadata'导入元数据；@成分({选择器:'app-root'，templateUrl: './app.component.html',styleUrls: ['./app.component.css'],提供者:[AppApi]})导出类 AppComponent 实现 OnInit {私有元数据:元数据；构造函数(私有 appApi:AppApi){this.metadata = new Metadata('', '', '', '', '', '', 0, 0, 0, 0, 0, 0);//这会创建一个新的空空白对象来存储检索到的数据}ngOnInit() {this.pegarDados();//这一行调用了从数据库中获取初始数据的方法}pegarDados() {//此方法向数据库发出请求，然后将数据保存到元数据"对象中.this.appApi.getConfig().toPromise().then((res) => {console.log('pego os dados');this.metadata = res[0];}).catch((错误) => {console.log('错误:');控制台日志(错误)；});}salvarDados() {//此方法应该向数据库发出请求，并使用 HTML 页面中更改的数据更新现有数据.console.log('Teste Salvar Dados');//目前它只在控制台中显示新数据.此处显示的数据与 HTML 页面中选择的数据兼容.控制台日志(this.metadata.dscStatusSul)；console.log(this.metadata.numStatusSul);/*this.appApi.setConfig(this.metadata).toPromise().then((res) => {console.log('车沟阿奎');this.metadata = res[0];控制台日志(this.metadata)；}).catch((错误) => {console.log('错误:');控制台日志(错误)；});*/}}基本上，唯一的问题是我无法根据pegarDados()"函数从数据库中检索的内容加载页面时检查相应的单选按钮.
当您使用 value="0" 设置单选按钮值时，您将其设置为字符串 "0"，与输入字段绑定的数值不匹配.要将单选按钮值设置为数字，请使用括号表示法:[value]="0".
<input [(ngModel)]="metadata.numStatusSul" type="radio" name="rdoResult" [value]="1"/>请参阅这个stackblitz演示.
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.
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.
这篇关于如何根据与其关联的 ngModel 检查单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
