Почему nativeElement элемента elementRef не определен?

Question

<div class="parent">
            <div class="input-group">
            <input  [(ngModel)]="InputValue" 
              #Field (input)="changedEvent()" (focus)="onFocus()" />
            <button (click)="changedEvent()">click</button>
            </div>
    
            <div #Container *ngIf="isFocused">
              // a table
            </div>

</div>

Имея приведенный выше код, я пытаюсь получить доступ к nativeElement #Field и #Container elementRefs в методе changedEvent () следующим образом:

  //this is how they have been declared in the component
  @ViewChild('Container', { static: false }) Container: ElementRef;
  @ViewChild('Field', { static: false }) Field: ElementRef;

  //inside the method
  const element = this.Field.nativeElement;
  const list = this.Container.nativeElement;

Когда go для этого метода, когда запускается прослушиватель ввода текстового поля, он работает нормально. Однако при нажатии кнопки и go здесь Container ElementRef не определен. (Поле определено). Хотел бы знать, что мне не хватает, где это работает из прослушивателя ввода, но не при указании из прослушивателя щелчков.

Answer 1

Кажется, что элемент контейнера не отображается, потому что * ngIf, а Angular не может ссылаться на него, так как еще не визуализирован. Попробуйте использовать [hidden]="!isFocused", если вы не хотите, чтобы элемент был видимым, но вы хотите, чтобы ссылка была действительной.