错误类型错误：无法读取 null 的属性“样式”

问题描述

我正在处理 angular 8 项目，并试图添加页面屏幕覆盖，但面临错误类型错误：无法读取 null 的属性“样式”。我添加了按钮，我正在制作 style.display = 'none' OR 'block'。我的代码在本地工作正常，但在使用“ng build --prod”部署到 firebase 后，我遇到了错误。 这是我的文件

index.html 文件

    <div id="loader-overlay">
      <div class="spinner-container">
        <div class="loader"></div>
      </div>
    </div>
  </div>

Styles.scss 文件

#loader-overlay-container {
  position: absolute;
  z-index: 10000000;
  top:0;
}

#loader-overlay {
  display: none;
  height: 100vh;
  width: 100vw;
  background-color: #333;
  opacity: 0.5;
}

shared.service.ts

 // To ADD Page loader screen
  enablePageLoaderOverlay() { 
    document.getElementById('loader-overlay').style.display = 'block';
  }

  // To REMOVE Page loader screen
  disablePageLoaderOverlay() {
    document.getElementById('loader-overlay').style.display = 'none';
  }

booking.component.ts

onBookService(name: string) {

    // To ADD Page loader screen
    this.sharedService.enablePageLoaderOverlay();

    this.sharedCartService.addToCart(this.services[name],"book");
  }

解决方法

我认为问题在于 index.html 文件中有 DOM 元素。

工作堆栈闪电战：

https://stackblitz.com/edit/angular-ivy-6286ot?file=src/app/app.component.html

<button (click)="hide()">Hide</button>
<button (click)="show()">Show</button>

<div id="loader-overlay">
  <div class="spinner-container">
    <div class="loader"></div>
  </div>
</div>

--

  hide(): void {
    document.getElementById("loader-overlay").style.display = "none";
  }

  show(): void {
    document.getElementById("loader-overlay").style.display = "block";
  }

---

但是，我建议使用 ViewChild 而不是使用 getElementById 进行搜索。

https://angular.io/api/core/ViewChild

,

这是使用 Angular 的错误方式……而应该是

-- Show in A not in B
SELECT * FROM TableA EXCEPT SELECT * FROM TableB

-- Show in A not in C
SELECT * FROM TableA EXCEPT SELECT * FROM TableC

-- Show in B not in A
SELECT * FROM TableB EXCEPT SELECT * FROM TableA

-- Show in B not in C
SELECT * FROM TableB EXCEPT SELECT * FROM TableC

-- Show in C not in A
SELECT * FROM TableC EXCEPT SELECT * FROM TableA

-- Show in C not in B
SELECT * FROM TableC EXCEPT SELECT * FROM TableB

然后在您的代码中：

<div *ng-if='IsLoaderShown">
    <div class="spinner-container">
        <div class="loader"></div>
    </div>
</div>