HTML по-прежнему включен при использовании ngIf с переменной

Question

I следующий угловой компонент:

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 в пустую строку или полностью пропустить атрибут
• Использовать угловой синтаксис [showFullMenu]="false".Это будет анализировать «ложь» как выражение, что приведет к логическому значению ложь .

Answer 2

Зачем вам здесь @Input, если вы устанавливаете значение по умолчанию и ожидаете, что оно будет ложным, удалить @Input и остальные должны работать нормально.

Если вам все еще нужен @Input, убедитесь, что вы используете === 'false'

При последнем редактировании вы должны передать значение @input как

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