无法在“窗口”上执行“getComputedStyle”：参数 1 不是“元素”类型。

Question

我一直在 StackOverflow 和 Google 中寻找一段时间，但无法真正找到解决我的问题的方法。就这样吧。

我通过@ViewChildren('labelSquare') public labelIcon: QueryList<HTMLSpanElement>;装饰器在 DOM 中有一组元素。在 HTML 中，我有以下内容来绑定它：

 <span class="status-item" *ngFor="let status of statusList">

     <div *ngIf="status.state !== 'Starting' &&

                 status.state !== 'Stopping' &&

                 status.state !== 'Synchronising' &&

                 status.state !== 'EmergencyStop'"

     >

       <div class="status">

         <span #labelSquare class="status-square fas fa-square {{ status.state }}"></span>

         <span class="status-name">{{ status.text }}</span>

       </div>

     </div>

 </span>

我从中得到了一个包含 58 个跨度元素的数组，现在想要附加一个比当前背景颜色深 10% 的边框。因此，我map为此使用了一个：

if (this.labelIcon) {

     this.labelIcon.map((icon: HTMLSpanElement) => {

         const element = window.getComputedStyle(icon);

         icon.setAttribute('style', `border: 1px solid ${ColorUtil.darkenBorderFromBackground(element.color)}`);

     });

 }

我的ColorUtil.darkenBorderFromBackground()简单回归return darken(${backgroundColor}, 10%)；（使用模板字符串，无法弄清楚如何在 StackOverflow 中格式化。

我的问题是现在我得到了一个TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

谁能帮我吗？

Answer 1

Angular 返回一个ElementRef非 DOM 元素。ElementRef有一个称为nativeElementDOM 元素的属性。所以icon改变icon.nativeElement内部window.getComputedStyle()请注意，您的打字稿界面也需要在 map 方法内进行更改。例如if (this.labelIcon) {&nbsp;this.labelIcon.map((icon: ElementRef) => { // Not sure if ElementRef is a valid interface in Angular&nbsp; &nbsp; &nbsp;const element = window.getComputedStyle(icon.nativeElement);&nbsp; &nbsp; &nbsp;icon.setAttribute('style', `border: 1px solid ${ColorUtil.darkenBorderFromBackground(element.color)}`);&nbsp;});}