typescript 根据数值(A:true,B:true)我需要以Angular 显示单选按钮

t9aqgxwy  于 2023-01-10  发布在  TypeScript
关注(0)|答案(1)|浏览(184)

我是新的Angular 。我试图显示单选按钮(选中和未选中)的基础上,服务器的响应,选中属性是行不通的。
我尝试显示两个单选按钮,其中一个label.one单选按钮为“允许”,另一个单选按钮为“拒绝”。服务器响应如下所示{“math”:对,“科学”:错误,“语言”:true}。我需要显示“允许”单选按钮应选中所有真值,“拒绝”按钮应选中所有假值。这就是我正在尝试的
radio-button.component.html

<form [formGroup]= subjectGroup (ngsubmit)="onSubmit()">
<div class="form-group row">
<label for="maths" class="col-sm-4 col-form-label text-dark">
<b>Maths</b></label>
<div class="form-check form-check-inline">
<input id="allow" type="radio" value="allow" name="screenCapture" formControlName="mathsValue"(click)="changeValue('maths', true)" checked="'response.maths' == true">
<label for="allow">Allow</label>
</div>
<div class="form-check form-check-inline">
<input id="deny" type="radio" value="deny" name="screenCapture" formControlName="mathsValue" (click)="changeValue('maths', false)"
checked="'response.maths' == false">
<label for="deny">Deny</label>
</div>
</div>
<button class="btn btn-success>Update</button>

radio-button.component.ts

import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-radio-button',
  templateUrl: './radio-button.component.html',
  styleUrls: ['./radio-button.component.css']
})

export class RadioButtonComponent implements OnInit {
public response;
public subjectGroup: FormGroup;

ngOnInit(): void {
this.getResponse();
this.form();
}

getResoponse(){
 // In this method, I am Storing all the server Response data to global variable (response)
}

form(){
this.subjectGroup = this.fb.group({
maths: new FormControl('')
})

changeValue(e, value) {
(this.response[e]) = value
  }

}

我想选中允许按钮的所有真值和选中拒绝按钮的所有假值,任何人都可以共享此功能的代码片段在Angular

g2ieeal7

g2ieeal71#

您的示例显示checked="'response.maths' == true"
我怀疑如果你检查你的DOM,你的元素就会有这个字符串,如果你想让angular把它作为一个实际的代码表达式来计算,你要么需要使用[checked],要么需要使用{{'response.maths' == true}}
对于您的使用,这两种方法实际上都不起作用,因为您要检查字符串'response.maths'是否为真,而事实并非如此(尽管您正在执行==而不是===,所以JS的整个truthy特性意味着它可能为真)。
您要使用的方法要简单得多:[checked]="response.maths".
response.maths是一个布尔值,因此您可以直接使用它。

相关问题