Question

我在理解角度6中的属性绑定时遇到困难。

对于何时应该使用 [property] =“ something” 和何时使用 property =“ something”

，我感到困惑

<div
    class="row"
    style="margin-top: 10px;" 
    *ngFor="let ingredientControl of recipeEditForm.get('ingredients').controls;let i=index"
    [formGroupName]="i">
    <div class="col-xs-8">
      <input
            type="text"
            class="form-control"
            formControlName="name"
            >
    </div>
</div>

在我上面的代码中，为什么formGroupName用[]括起来，为什么formControl没有。

如果我在其上交换[]会发生什么？当然会引发错误，原因何在？

Answer 1

在这里看看：Remember the brackets

方括号告诉Angular评估模板表达式。如果你省略括号，Angular将字符串视为常量，然后使用该字符串初始化target属性。它不评估字符串！

假设 i 的范围是0到2，包括方括号，例如...

<div [formGroupName]="i">

...将产生...

<div formGroupName="0">
<div formGroupName="1">
<div formGroupName="2">

...这样不包括方括号...

<div formGroupName="i">

...将产生...

<div formGroupName="i">
<div formGroupName="i">
<div formGroupName="i">

...这可能不是您想要的。

对于 formControlName ，如果您添加了方括号，例如...

<input [formControlName]="name">

... angular将尝试评估名称，并将结果分配给 formControlName 。也许 name 作为组件属性存在？

没有方括号，将为 formControlName 分配字面值“名称” 。

角度6中的属性绑定

1 个答案: