Блог

Я хочу добавить класс CSS к элементам div, созданным с помощью директивы *ngFor Angular. Во-первых, я попробовал использовать директиву @ViewChild и Render2, но, похоже, она не работает с несколькими элементами. Во-вторых, я попытался манипулировать элементами div с помощью директивы @ViewChildren, но не смог найти подходящего примера синтаксиса, который бы работал для меня. Как я могу получить доступ к этим элементам и работать с их списком классов?

Сообщение об ошибке, которое я получаю, выглядит так: 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')
        );
      }
   }
}
 

Если я вас правильно понял, вы можете просто использовать поле для хранения нужного вам 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 очень редко используется