结合使用ngIf和变量时仍包含HTML

Question

我有以下Angular组件：

export class HeaderMainComponent {
  @Input() showFullMenu: boolean = false;
}

然后在我拥有的HTMl上：

<p>{{showFullMenu}}</p>

<nav *ngIf="showFullMenu">
  <li>Link 1</li>
  <li>Link 2</li>
</nav>

变量showFullMenu呈现为false，但导航栏仍显示。

我正在使用以下模板：

<header-main showFullMenu="false"></header-main>

我想念什么？

Answer 1

在HTML中，任何非空属性的求值为true。因此，此showFullMenu="false"将属性设置为字符串“ false”，这将导致布尔变量被评估为 true 。

要将其设置为 false ，您有两个选择：

• 将HTML属性设置为空字符串或完全忽略属性
• 使用Angular语法[showFullMenu]="false"。这会将“ false”解析为一个表达式，该表达式将导致布尔值 false 。

Answer 2

如果要设置默认值并期望它为false，那么为什么在这里需要@Input，请删除@Input，其余应该可以正常工作。

如果您仍然需要@Input，请确保您使用的是==='false'

在最新的修改中，您应将@input值作为

传递

<header-main [showFullMenu]="false"></header-main>