Помогите разобраться, почему отрабатывается дважды условие *ngIf с противоположными условиями в Angular 11

Question

Есть контейнер с данными. Он отрисовывается, если данные есть, что и прописано в условии *ngIf. И есть блок-заглушка, которая отрисовывается, когда данных нет. Вроде бы всё просто и проблем быть не должно, но, у меня рендерятся оба блока. И когда я явно не передаю данные, то рендерятся две заглушки. Данные спускаются от родительского компонента Т.е. родительский контейнер рендерится дважды. Мозг готов взорваться, не могу понять, в чём дело. Пробовала в ngOnInit проверять наличие menuItems и в отельную переменную записывать true/false. Не помогло. Данные приходят и заглушка тоже на месте. Причём, когда данные есть, отрисовывается два контейнера: данные + заглушка. Когда данных нет - заглушка и заглушка. Но два контейнера с данными не рендерится.

export class PermissionMenuComponent implements OnInit {
  @Input() menuItems: menuItem[];
  count: number = 0;
  constructor() {}

  ngOnInit(): void {}
}

<div class="menu">
  <div *ngIf="menuItems" class="menu__container">
    <div class="menu__item" *ngFor="let item of menuItems">
      контент
    </div>
    <button class="menu__add-btn" (click)="addItem(menuItems)">
          <mat-icon aria-hidden="false" aria-label="Add item">add</mat-icon>
          Add New Item
        </button>
  </div>
  <div *ngIf="!menuItems" class="menu__no-data">
    <div class="menu__no-data-content">
      <p>No items added</p>
      <button class="menu__add-btn" (click)="addItem()">
            <mat-icon aria-hidden="false" aria-label="Add item">add</mat-icon>
            Add First Item
          </button>
    </div>
  </div>
</div>

Answer 1

Проблема с двойным вызовом рендера решилась удалением в app.html. Я пока новичок в angular и мне не совсем понятно, почему так происходило. Надеюсь, со временем дойдёт :).

БЛОГ НА HUSL

Помогите разобраться, почему отрабатывается дважды условие *ngIf с противоположными условиями в Angular 11

Ответы (1 шт):