Question

是否可以使用其样式类从ts文件访问html字段？
我想做的是基于按钮单击显示/隐藏一些字段。字段是动态生成的，我只能访问样式类。

Here is the stackblitz link是我要尝试做的事情。我试图在单击切换时显示/隐藏所有带有class =“ label”的字段。 mat-list-items是动态生成的，我无法对其进行修改。我该怎么办？

<mat-nav-list style="padding-top:0px !important;">
  <a mat-list-item (click)="toggle(showText); showText = !showText">
    <i id="right" *ngIf=!showText class="material-icons" aria-label="Show icon only">chevron_right</i>
    <i id="left" *ngIf=showText class="material-icons" aria-label="Show icon and text">chevron_left</i>
  </a>
  <a mat-list-item routerLink="dashboard" class="menu-item" routerLinkActive="active">
    <i class="material-icons">dashboard</i>&nbsp;<span class="label">Dashboard</span></a>
  <a mat-list-item routerLink="order" class="menu-item" routerLinkActive="active">
    <i class="material-icons">shopping_cart</i>&nbsp;<span class="label">Create Order</span></a>
  <a mat-list-item routerLink="order-search" class="menu-item" routerLinkActive="active">
    <i class="material-icons">search</i>&nbsp;<span class="label">Order Search</span></a>
  <a mat-list-item routerLink="job-search" class="menu-item" routerLinkActive="active">
    <i class="material-icons">search</i>&nbsp;<span class="label">Job Search</span></a>

</mat-nav-list>

Answer 1

您可以使用querySelectorAll或getElementsByClassName来检索具有“ label”类的HTML元素，并设置hidden属性以切换其可见性：

showText = true;

constructor(private el: ElementRef) { }

toggle() {
  this.showText = !this.showText;
  const elements = this.el.nativeElement.querySelectorAll(".label");
  const htmlElements = Array.from(elements).map(x => x as HTMLElement);
  htmlElements.forEach(label => label.hidden = !this.showText);
}

有关演示，请参见this stackblitz。请注意，(click)事件处理程序仅调用toggle()。

Answer 2

更好地创建一个变量，并对dom元素使用*ngIf条件。

Angular：使用样式类从Component访问元素

2 个答案: