错误TypeError：无法读取未定义的属性'nativeElement'出现错误

Question

嗨，我正在Angular 7项目上工作，我已经使用Angular @ViewChild和nativeElement实现了div show hide功能，但出现以下错误： 错误TypeError：无法读取未定义的属性'nativeElement'。

我试图在线理解和搜索，但没有任何解决方案。以下是我的代码，因此任何人都可以查看我的代码并建议对我的代码进行一些更改，以便我可以解决我的问题。谢谢！

import { HttpClient } from "@angular/common/http";    
import { Theme } from "./../../../model/themes/themes.model";    
import { MatDialog } from "@angular/material";    
import { BaseResponse } from "./../../../model/BaseResponse.model";    
import {
  Component,
  OnInit,
  SecurityContext,
  ViewChild,
  ElementRef,
  Renderer2,
  Directive,
  Input,
  HostListener,
  Inject,
  ElementRef as ErrorProneElementRef
} from "@angular/core";    
import { RedisCacheService } from "../../services/redis-cache.service";    
import { UserSessionActions } from "src/app/model/user-session-actions/UserSessionActions.model";    
import { Router, NavigationStart } from "@angular/router";    
import { ChannelService } from "src/app/app-modules/channels/channel.service";    
import { CommonDialogComponent } from "../../common-dialog/common-dialog.component";    
import { Store } from "@ngrx/store";    
import { Subscription } from "rxjs";    
import { CommonService } from "../../services/common.service";    
import * as fromLogin from "../../../store/auth/login/login.actions";    

@Component({
  selector: "app-header",
  templateUrl: "./header.component.html",
  styleUrls: ["./header.component.scss"]
})
export class HeaderComponent implements OnInit {
  //_profilePanel: boolean = false;
  _themePanel: boolean = false;
  _modalData: string;
  _stateData: any;

  loggedInUserName: string;
  loggedInUserEmail: string;

  _jsonDarkMenu = "assets/json/Themes/darkTheme.json";
  _jsonLightMenu = "assets/json/Themes/lightTheme.json";
  _jsonDefaultTheme = "assets/json/Themes/defaultStandardTheme.json";

  subscription: Subscription;

  darkThemeArray: Theme[] = [];
  lightThemeArray: Theme[] = [];
  defaultTheme: Theme[] = [];
  _userProfileView: boolean = false;
  @ViewChild("clickOutsideCloseBtn") clickOutsideCloseBtn: ElementRef;
  @ViewChild("userProfile") userProfile: ElementRef;

  @ViewChild("themePanelShowHide") themePanelShowHide: ElementRef;
  @ViewChild("themeCloseBtn") themeCloseBtn: ElementRef;

  @ViewChild("header-disableProfileIcon") headerPreferenceToggle: ElementRef;
  @ViewChild("header-user-profile-section") preferenceMenu: ElementRef;
  dialogRef: any;

  constructor(
    private _redisCacheService: RedisCacheService,
    private router: Router,
    private _channelService: ChannelService,
    private _dialog: MatDialog,
    private store: Store<any>,
    private renderer: Renderer2,
    private http: HttpClient,
    private commonService: CommonService,
    myElement: ElementRef
  ) {



    /**
     * This events get called by all clicks on the page
     */
    this.renderer.listen("window", "click", (e: Event) => {
      /**
       * Only run when toggleButton is not clicked
       * If we don't check this, all clicks (even on the toggle button) gets into this
       * section which in the result we might never see the menu open!
       * And the menu itself is checked here, and it's where we check just outside of
       * the menu and button the condition abbove must close the menu
       */
      if (
        !this.clickOutsideCloseBtn.nativeElement.contains(e.target) &&
        !this.userProfile.nativeElement.contains(e.target)
      ) {
        this._userProfileView = false;
      }
    });

    this.renderer.listen("window", "click", (e: Event) => {
      /**
       * Only run when toggleButton is not clicked
       * If we don't check this, all clicks (even on the toggle button) gets into this
       * section which in the result we might never see the menu open!
       * And the menu itself is checked here, and it's where we check just outside of
       * the menu and button the condition abbove must close the menu
       */
      if (
        !this.themePanelShowHide.nativeElement.contains(e.target) &&
        !this.themeCloseBtn.nativeElement.contains(e.target)
      ) {
        this._themePanel = false;
      }
    });
  }

  /**
   * This events get called by all clicks on the page
   */

  ngAfterViewInit() {}

  htmlContent: string;
  private themeWrapper = document.querySelector("body");
  ngOnInit() {

  }

  }

HTML代码：-

<div>
      <div
        class="header-user-profile-section"
        #userProfile
        *ngIf="_userProfileView"
      >
        <ul class="header-user-profile-menu">
          <li class="header-pad-bottom-0">
            <span class="header-user-pofile-img"
              ><img
                class="header-profile-icon"
                src="../../../../assets/images/common/user-profile-placeholder.jpg"
                alt="profile-img"
            /></span>
          </li>
          <li>
            <p class="header-username-txt">
              {{ _stateData.userDetails.userFullName }}
            </p>
            <p class="header-secondary-text">
              {{ _stateData.userDetails.userId }}
            </p>
          </li>
          <li class="header-logout-btn ">
            <button class="hb-btn-transparent" (click)="_logoutClickHandler()">
              Logout
            </button>
          </li>
        </ul>
      </div>
    </div>