使用真假值的角度单选按钮绑定答案

【问题标题】：Angular Radio Button Binding using true false value使用真假值的角度单选按钮绑定
【发布时间】：2020-11-24 01:05:47
【问题描述】：

我注意到我必须使用 [value]=true 而不是 value = true 以便我的单选按钮从组件类中获取初始值。这是如何工作的 - 在 value 周围加上括号会以某种方式告诉 Angular 使用来自 [(ngModel)] 的初始值吗？

HTML：

<input type="radio" id ="yesChoice" [(ngModel)] ="serverDeluxe" [value]=true  >
<label for="yesChoice">Yes</label>
<br>
<input type="radio" id ="noChoice"  [(ngModel)] ="serverDeluxe" [value]=false >
<label for="noChoice">No</label>

TS：

export class ServerComponent implements OnInit{
  serverId = 10;
  serverStatus = 'offline';
  serverDeluxe = true;

  ngOnInit(): void {

  }

  getServerStatus(): string{
    return this.serverStatus;
  }
}

【问题讨论】：

标签： angular data-binding

【解决方案1】：

如Angular documentation中所述：

括号 [] 告诉 Angular 评估模板表达式。如果如果省略括号，Angular 会将字符串视为常量，并且用该字符串初始化目标属性：
<app-item-detail childItem="parentItem"></app-item-detail>
省略括号将呈现字符串"parentItem"，不是parentItem 的值。

在您的情况下，方括号允许将无线电输入设置为布尔值：

[value]="true" <---- Sets the value to the boolean true
value="true"   <---- Sets the value to the string "true"

serverDeluxe 的初始值通过[ngModel] 绑定到控件（这是[(ngModel)] 的一部分）。由于serverDeluxe 是一个布尔属性，它永远不会匹配字符串"true" 或"false"。

【讨论】：

谢谢，所以我现在理解了括号部分，但是 serverDeluxe 如何在加载时将其值绑定到 [value]？例如，如果它为 false，则单选按钮将以 false 开头。它是怎么做到的？
serverDeluxe 的初始值与[ngModel] 绑定到控件（这也是[(ngModel)] 的一部分）。我将那部分添加到答案中。
所以它与[值]匹配，然后如果值匹配，则将检查设置为true？
这是我的理解，也是我们观察到的行为。如果您想了解单选按钮的ngModel 绑定的确切内部工作原理，可以查看ngModel、RadioControlValueAccessor 及其基类的代码。

【解决方案2】：

由于[value] 属性，上述代码适用于您。它将值视为动态值（作为模板表达式），因此 html 能够绑定单选选项。

如果我们将提供value=true 而不是[value]=true，那么我们将不得不提供name 属性。

对于value=true，它将采用value="true"，对于[value]=true，采用value=true

【讨论】：

谢谢，但是上面的单选按钮在没有名称选项的情况下可以正常工作，我的问题是我的示例在没有名称选项的情况下如何工作？
编辑了我对问题的回答