无法在“窗口”上执行“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) {

 this.labelIcon.map((icon: ElementRef) => { // Not sure if ElementRef is a valid interface in Angular

     const element = window.getComputedStyle(icon.nativeElement);

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

 });

}