Блог

Я использую Angular7, npm 6.4.1, узел 10.15.3.

Я просто играю с ngIf, это не делает ничего полезного. Я использую две кнопки для переключения между отображением и скрытием заголовка. Хотя это было просто ngIf утверждение, оно отлично работало со следующим кодом:

     <p>Do you want to see the last header?</p>
    <button (click)="yesHeader()">Yes please!</button>
    <button (click)="noHeader()">PLEASE G-D NO!</button>

    <h2 *ngIf="displayHeader" style="color:blue">Here it is in all its glory!</h2>
 

и

 public displayHeader=false;

  yesHeader(){
    this.displayHeader=true
  }

  noHeader(){
    this.displayHeader=false
  }
 

И это сработало нормально, показывая заголовок при нажатии yesHeader кнопки и скрывая его снова при нажатии noHeader кнопки.

Однако, когда я добавил блок ngIf Else, он перестал переключаться взад и вперед. Изменение было следующим:

     <p>Do you want to see the last header?</p>
    <button (click)="yesHeader()">Yes please!</button><button (click)="noHeader()">NO! NO!</button>

    <h2 *ngIf="displayHeader; else noHeader" style="color:blue">Here it is in all its glory!</h2>

    <ng-template #noHeader>
      <h5>You don't know what you're missing!</h5>
    </ng-template>
 

Теперь он отображается You don't know what you're missing! при запуске и переключается на заголовок, если я нажимаю «Да». Но он не переключается обратно на скрытие заголовка, если я нажму кнопку no после этого.

Что я делаю не так и как я могу заставить его переключиться обратно?

В качестве дополнительной точки данных, если я оставлю блок else, но else noHeader выну из оператора ngIf, он все равно не переключится обратно. Таким образом, по-видимому, существование ng-template — это то, что останавливает работу.

Проблема в том , что существует конфликт имен noHeader . Он используется в вашем примере как метод в классе компонента, так и имя компонента ng-template . Попробуйте изменить либо имя метода, либо имя шаблона:

 <p>Do you want to see the last header?</p>
<button (click)="yesHeader()">Yes please!</button><button (click)="noHeader()">NO! NO!</button>

<h2 *ngIf="displayHeader; else noHeaderTemplate" style="color:blue">Here it is in all its glory!</h2>

<ng-template #noHeaderTemplate>
  <h5>You don't know what you're missing!</h5>
</ng-template>
 

Вот пример в действии.

Ваш шаблон вызывается так же , как и функция: noHeader .

У вас проблема с коллизией имен, вы не можете вызвать noHeader функцию, Angular думает, что вы ссылаетесь noHeader на ссылку на шаблон.

 <ng-template #noHeaderTemplate>
  <h5>You don't know what you're missing!</h5>
</ng-template>
 

Или

 hideHeader() {
  this.displayHeader = false;
}
 

Правильная среда разработки должна сообщить вам, что «Участник noHeader не вызывается».