如果我们不想将它绑定到组件字段，为什么angular ngIf指令需要括号？

Question

如果我们不想将属性指令绑定到组件字段，为什么我们需要括号。

例如，为什么下面的代码不起作用：

<ng-template ngIf=false>
     <h3>Test</h3>
</ng-template>

如果我们使用括号（[ngIf] = false），它是有效的，但据我所知，当我们想要将http标签属性或指令绑定到组件变量时使用括号

例如，ngClass指令在没有括号的情况下正常工作：

<h2 ngClass='myclass'>title</h2>

Answer 1

简短回答：当使用不带括号的ngIf时 - 你会评估一个字符串。并且由于除空字符串以外的任何字符串的计算结果为true，因此会显示该元素。

答案很长：当你在一个元素上放置一个*ngIf="boolean"时，比如一个div，那么它与这样做完全相同：

<ng-template [ngIf]="boolean">
     <div> ... </div>
</ng-template>

到目前为止这么好，你可以并且可能已经从angular documentation读过这个。奇怪的是，你不想给它涂糖，并直接自己使用ng-template。

现在你问，如果我删除括号，事实上，扔掉单向绑定会发生什么。并简单地为该ngIf指令设置一个值。

当您在元素上使用其他属性时会发生什么样的行为。说，[class]。如果你在元素上使用[class]="text-red"。你会在你的元素上得到一个名为undefined的类。您只是尝试使用未定义的对象作为您的类名。

所以如果我们假设这个CSS规则生效：

.text-red { color: red }

当不使用括号时，它需要一个字符串。

<div class="text-red"> I AM RED </div>  // text is red

当使用括号时，它需要一个表达式，添加撇号来表示一个字符串。

<div [class]="'text-red'"> I AM RED </div>  // text is red

希望这会让事情变得更加清晰