javascript - 如何在 Angular 中访问从 ngFor 指令生成的多个元素?
问题描述
我想将 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>
TS
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'
}
这就是它在角度中Renderer
的工作方式,很少使用
推荐阅读
- html - 如何阻止子段落在css网格内拉伸父div
- java - Appium - Real Me 3 Pro 设备:禁止获取 java.lang.securityexception adb 清除用户数据
- java - 在 Java 中,如何为扩展 Comparator 的类实现多个比较器方法?
- android-camera-intent - 在 Android 11 R 中,Camera REQUEST_CODE 返回零
- linq - 在 sql 列表中搜索
? - flutter - 如何查找在 FutureBuilder 中呈现的 GridView 的高度
- python - Django Query 在 python shell 上工作,但在模板和表单中不起作用
- apache-spark - spark-shell 的 Apache Hudi 示例为 Spark 2.3.0 引发错误
- python - webbrowser打开Internet Explorer错误而不是默认浏览器(python)
- python - 无法在 Kaggle 笔记本中安装 Python 库