* ngIf не переключается обратно в false в блоке else - PullRequest
Новая
       16

* ngIf не переключается обратно в false в блоке else

1 голос
/ 18 апреля 2019

Я использую 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
  }

И он работал нормально, показывая заголовок при нажатии *Кнопка 1010 * и ее скрытие при нажатии кнопки 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! и переключается на заголовок, если я нажимаю «да».Но он не переключается обратно на скрытие заголовка, если я нажимаю кнопку «нет» после этого.

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

Как добавленоdatapoint, если я оставляю блок else, но вынимаю else noHeader из оператора ngIf, он все равно не переключается обратно.По-видимому, существование ng-шаблона - вот что мешает.

Ответы [ 2 ]

6 голосов
/ 18 апреля 2019

Проблема в том, что существует конфликт имен 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>

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

Надеюсь, это поможет!

2 голосов
/ 18 апреля 2019

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

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

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

Или 

hideHeader() {
  this.displayHeader = false;
}

Надлежащая IDE должна сообщать вам: «Член noHeader не может быть вызван».

...