如何在 Angular 中访问从 ngFor 指令生成的多个元素？答案

【问题标题】：How to access multiple elements generated from ngFor directive in Angular?如何在 Angular 中访问从 ngFor 指令生成的多个元素？
【发布时间】：2021-09-22 21:07:14
【问题描述】：

我想将 CSS 类添加到使用 *ngFor Angular 指令生成的 div 元素中。首先，我尝试使用 @ViewChild 指令和 Renderer2，但它似乎不适用于多个元素。其次，我尝试使用 @ViewChildren 指令操作 div 元素，但找不到适合我的语法示例。如何访问这些元素并使用它们的 classList？

我得到的错误信息是：Error: Uncaught (in promise): TypeError: el.classList is undefined addClass

HTML

 <div
    class="row" #rowDiv
    *ngFor="let courtReservation of currentIntervalReservations"
 >
      <div class="court">
        <h1 class="court-name">{{ courtReservation.courtName }}</h1>
      </div>
      <lp-player-diagram
        *ngFor="let res of courtReservation.reservations; let i = index"
        [playerName]="res.playerName"
        [index]="i"
      ></lp-player-diagram>
 </div>

export class MainGantogramComponent implements OnInit, AfterViewInit {   
   @ViewChildren('rowDiv') rowElements?: QueryList<HTMLDivElement>;

   constructor(private renderer: Renderer2) {}

   /* ... */

   setGridTemplateClass(currentTime: Time) {
      if (currentTime.minutes == 0) {
        this.rowElements?.forEach((div) =>
          this.renderer.addClass(div, 'short-grid-template')
        );
      } else {
        this.rowElements?.forEach((div) =>
          this.renderer.addClass(div, 'standard-grid-template')
        );
      }
   }
}

【问题讨论】：

标签： javascript html angular typescript

【解决方案1】：

如果我理解正确，您可以使用一个字段来存储您需要的 css 类：

 <div
    class="row"
    [ngClass]="gridClass"
    *ngFor="let courtReservation of currentIntervalReservations"
 >
      <div class="court">
        <h1 class="court-name">{{ courtReservation.courtName }}</h1>
      </div>
      <lp-player-diagram
        *ngFor="let res of courtReservation.reservations; let i = index"
        [playerName]="res.playerName"
        [index]="i"
      ></lp-player-diagram>
 </div>

----

setGridTemplateClass(currentTime: Time) {
  this.gridClass = currentTime.minutes === 0 ? 'short-grid-template' : 'standard-grid-template'
}

这就是它在 Angular 中的工作方式，Renderer 很少使用

【讨论】：