Блог

Почему я получаю сообщение об ошибке ‘Не удается прочитать свойство ‘nativeElement’ неопределенного’ с этим кодом:

HTML

  <div class="modal-body" *ngIf="!filter">
        <div class="text-center">
          <i class="ni ni-building ni-3x"></i>
        </div>
        <div class="table-responsive" #unfilteredData>

        </div>
      </div>
  

ts

 @ViewChild('unfilteredData', {static: true}) unfilteredData: ElementRef;
 constructor(
        private ss: StationsService,
        private modalService: NgbModal,
        private as: AppointmentService,
        private renderer: Renderer2,
    ) {
        this.stations = this.ss.stations;
     }

ngOnInit() {
        this.getLocations();
    }

ngAfterViewInit(): void {
    this.onToggleChange();
}

onToggleChange() {
        if (this.filter) {
            this.showListMessage = 'Filtered';
        } else {
            this.showListMessage = 'Unfiltered';
            this.setupUnfiltered();
        }
    }

setupUnfiltered() {
       
            this.renderer.setProperty(this.unfilteredData.nativeElement, 'innerHtml', <label>XXX</label>);
}
  

Из официальных документов: https://angular.io/api/core/ViewChild#description

Запросы просмотра задаются перед вызовом обратного вызова ngAfterViewInit.

Это означает, что свойство ViewChild будет доступно только при ngAfterViewInit (и после этого)

(в настоящее время вы пытаетесь получить к нему доступ в событии OnInit)

Кроме того, вам необходимо изменить static на false (поскольку у вас есть структурная директива [ngIf] в качестве родительской для вашей ссылки ViewChild)

Рабочий пример Stackblitz