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