HTML 在将 ngIf 与变量一起使用时仍然包含在内

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

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

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

对于最近的编辑，您应该将@input 值作为

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

Answer 2

在 HTML 中，任何非空属性的计算结果为真。所以这个 showFullMenu="false" 将属性设置为字符串 "false"，这将导致布尔变量被评估为 true.

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

HTML is still included when using ngIf with variable