Question

我正在尝试将属性设置为html元素，但收到错误类型'HTMLCollectionOf'不能分配给'HTMLElement'

这是我的打字稿代码---

let elem: HTMLElement= document.getElementsByClassName('notification-top-bar');
      setTimeout(elem.setAttribute("style", "display:none;"), this.duration);

这是我的HTML代码---

<div class="row">
  <div *ngFor="let n of notifications" class="notification-top-bar" [ngClass]="type" style="display: block;">
    {{message}}  
    <a class="close glyphicon glyphicon-close" (click)="onCloseNotifications($event)"></a>
    <p>{{n}}</p>
  </div>
</div>

Answer 1

document.getElementsByClassName返回一个数组，而不是单个Element。你可以通过指定像

这样的索引来获取元素

document.getElementsByClassName('notification-top-bar')[index]

我认为你这里有拼写错误，应该显示

setTimeout(elem.setAttribute("style", "display:none;"), this.duration);

Answer 2

我认为你更好的帮助和身份

<div id="notification_id" *ngFor="let n of notifications" class="notification-top-bar"

以这种方式得到它：

document.getElementById("notification_id")

如果你使用classname这样做，也许你不知道元素的位置。

Answer 3

使用ViewChildren获取元素并设置其样式。为此，您必须为元素添加模板引用，您可以使用它们在代码中获取它们。更改模板代码以添加引用，例如的 #notification ：

<div class="row"> <div *ngFor="let n of notifications" #notification class="notification-top-bar" [ngClass]="type" style="display: block;"> {{message}} <a class="close glyphicon glyphicon-close" (click)="onCloseNotifications($event)"></a> <p>{{n}}</p> </div> </div>

然后您可以使用 QueryList 在您的代码中使用 import { Component, ViewChildren, QueryList } from '@angular/core'; @Component({ ... }) export class YourComponent { // Get the template elements @ViewChildren('notification') private _notificationsElements: QueryList<ElementRef>; ngAfterViewInit() { this._notificationsElements.forEach((element)=>{ const htmlElement = element.nativeElement as HTMLElement; // Assigning the property directly setTimeout(htmlElement.style.display = 'none',this.duration); // OR // Using the setAttribute method setTimeout(htmlElement.setAttribute("style", "display:none;"),this.duration); }); } } ：

text-align: justify

StackBlitz Demo

如何在typescript / angular中设置html元素的样式

3 个答案: