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

Question

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

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

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

如果我们使用括号([ngIf]=false(，它就可以工作，但据我所知，当我们想要将 http tag 属性或指令绑定到组件变量时，会使用括号

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

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

Answer 1

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

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

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

到目前为止一切顺利，您可以并且可能已经从角度文档中阅读了本文。 所以奇怪的是，你不想粉饰它，直接自己使用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

希望这能让事情更清楚一点