在 Angular 2 中使用响应更新单选按钮答案

【问题标题】：Update radio buttons with response in Angular 2在 Angular 2 中使用响应更新单选按钮
【发布时间】：2018-09-13 04:06:59
【问题描述】：

我有两个带有 Yes No 标签的单选按钮。现在我必须使用来自服务的响应来设置值。来的值是 True 和 False。我无法在 html 中设置它们。请任何人都可以帮我解决这个问题。

【问题讨论】：

为什么不能用html设置？设置一个单选按钮checked属性为真或假。
我尝试使用检查属性。它正在设置，但之后我无法更改单选按钮。你能发布任何解决方案吗
改变它是什么意思？您是否将来自服务的响应映射到对象或变量中？然后你想改变那个变量？想稍后将其发布回服务？
不不，我正在设置响应中的值，并将其设置为“否”按钮。之后，当我尝试选择 Yes 时，它没有被选中。
尝试将 [(ngModule)] 赋予两个单选按钮

标签： angular data-binding radio-button angular2-forms

【解决方案1】：

假设您根据名为 myBool 的响应设置了一个变量，您可以这样做：

<input type="radio" [checked]="myBool" (click)="myBool = true" />
<input type="radio" [checked]="!myBool" (click)="myBool = false" />

【讨论】：

【解决方案2】：

您可以使用 HTML 中检查的属性，并根据组件中的模型设置其值。例如，

app.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  implements OnInit {

    public state = false;

    ngOnInit() {

      // get data from your service
       this.service.getData()
         .subscribe(response : boolean=>{
           this.state = response;
         })
    }
}

app.component.html

 <input type="radio" name="answer" [value="Yes" [checked]="!state"/> Yes <br>
 <input type="radio" name="answer" value="No" [checked]="state"> No <br>

【讨论】：

由于 [checked]=state （无引号），这实际上会使他的应用程序崩溃，他根据布尔值询问是或否按钮，您提供了 3 个按钮，只有一个按钮有任何与国家有关的事情。您还包含了一堆来自 stackblitz starter 模板的代码，与问题完全无关。

【解决方案3】：

在上述响应中，它以布尔值 True 或 false 的形式出现，如果响应以 1 和 2 代替 true 或 false，那么您将如何将此值设置为输入类型 radio

【讨论】：