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

【问题标题】：Why angular ngIf directive need bracket if we don't want bind it to component field?如果我们不想将 Angular ngIf 指令绑定到组件字段，为什么需要括号？
【发布时间】：2019-02-20 19:05:09
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

因为它是一个字符串，即"false"，它是一个真值。（另外，应该是*ngIf）
即使使用 "" 也无法正常工作
有吗？正如我所说，它应该是*ngIf=""，它将隐藏元素。确保包含*
实际上，刚刚检查过它也适用于*ngIf="false"，所以我的假设是不正确的。
这里不需要 * 因为我使用的是 ng-template

标签： angular angular-directive

【解决方案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

希望这能让事情变得更清楚

【讨论】：