Angular HTML 中括号 [] 和没有括号有什么区别？答案

【问题标题】：What is the difference with brackets [] and without them in Angular HTML?Angular HTML 中括号 [] 和没有括号有什么区别？
【发布时间】：2021-05-16 20:41:22
【问题描述】：

我在 Angular 中使用响应式表单并将单选按钮添加到我的 HTML 代码中。首先，我将代码如下所示，并在复选框选择默认值时使用“默认”关键字。但我第二次加载相同的表单默认检查不可见。在 type script form 中，我会将值 'true' 修补为默认的表单控制器。

<mat-radio-button  value="true" id="1" [checked]="true" />
<mat-radio-button  value="false" id="2"  />

在我像下面这样更改之后。

<mat-radio-button  [value]="true" id="1" />
<mat-radio-button  [value]="false" id="2" />

现在它按预期工作了。需要一些专家的帮助，这种不同的方式在内部会发生什么？

【问题讨论】：

标签： html angular typescript angular-reactive-forms

【解决方案1】：

方括号告诉 Angular 输入绑定属性是一个表达式，需要对其求值。例如：

<mat-radio-button [prop]="prop" />

将尝试访问其范围内的prop 变量并获取其值，同时

<mat-radio-button prop="prop" />

将简单地将prop 属性添加到分配了字符串值的元素

【讨论】：

【解决方案2】：

value="true" 绑定 string 'true' 而不是布尔值。

[value]="true" 绑定到布尔值true。使用方括号 []，Angular 绑定到文字（布尔值、字符串、数字等）或组件中的任何公共或模板变量。

value="true" 与[value]="'true'" 相同。

【讨论】：