angular - Angular 6 将活动类添加到另一个 ngFor 的 ngFor 元素
问题描述
我在 html 中有两个 ngFor 循环。一个用于显示标题,一个用于正文。两者都在同一个数组上迭代(比如 A)。数组 A 是数组 B 的每一项的一个元素。例如:B[id:1, arrayA: A[]]。数组 B 在单独的 ngFor 循环中迭代,该循环是 A 和 B 的父级。
当单击任何标题时,我想将活动类添加到数组 A 的每个元素的标题和正文中。这适用于数组 A 的第一个元素。对于所有剩余元素,这都不适用于主体。
尝试过的代码 - 标题和正文上的 [class.active]="elementA.toggle" 以及标题单击 - (click)="elementA.toggle = !elementA.toggle"
还尝试使用 [ngClass]="elementA.toggle ? 'active' : ''" 只处理标题而不是正文。
如果需要,我可以共享代码。
在 Component.ts 中:
categories: [category_A, category_B] // Array B
category_A: any =
{ id: 2, name: "A", toggle: false, subCategories: [subCategory_A, subCategory_B] }
category_B: any =
{ id: 2, name: "B", toggle: false, subCategories: [subCategory_A] }
subCategory_A: any =
{ id: 2, name: "SubA", items: this.items_Bread, subCategoryToggle: false } // Array A
subCategory_B: any =
{ id: 2, name: "SubB", items: this.items_Bread, subCategoryToggle: false } // Array A
我的 HTML:
<div *ngFor="let Category of model.categories">
<a data-toggle="collapse" href="#{{Category.name}}" (click)="Category.toggle = !Category.toggle;">{{Category.name}}</a>
<!-- Header Section-->
<div>
<div>
<a href="#subCategory.name" class="list-group-item" *ngFor="let subCategory of Category.subCategories; let index = index"
[class.active]="subCategory.subCategoryToggle" (click)="subCategory.subCategoryToggle = !subCategory.subCategoryToggle">
{{subCategory.name}}
</a>
</div>
</div>
<!-- Header Section-->
<!-- Body Section-->
<div [attr.id]="subCategory.name" *ngFor="let subCategory of Category.subCategories; let index = index"
[ngClass]="subCategory.subCategoryToggle ? 'active' : ''" >
<div>
<!-- Body Section-->
<div>
此代码适用于类别中的第一个元素,即 category_A。但对于 category_B - 主体部分中未设置活动类。
解决方案
<div *ngFor="let Category of model.categories">
<a data-toggle="collapse" href="#{{Category.name}}" (click)="Category.toggle = !Category.toggle;" [attr.id]="Category.name">{{Category.name}}</a>
<!-- Header Section-->
<div>
<div>
<a href="#subCategory.name" class="list-group-item" *ngFor="let subCategory of Category.subCategories; let index = index"
(click)="subCategory.subCategoryToggle = !subCategory.subCategoryToggle" data-toggle="collapse" aria-expanded="false" [attr.aria-controls]="subCategory.name">
{{subCategory.name}}
</a>
</div>
</div>
<!-- Header Section-->
<!-- Body Section-->
<div [attr.id]="subCategory.name" *ngFor="let subCategory of Category.subCategories; let index = index"
[ngClass]="subCategory.subCategoryToggle ? 'active' : ''" [attr.data-parent]="'#' + Category.name">
<div>
<!-- Body Section-->
我的修复..
推荐阅读
- html - 为什么我的 css 页脚部门在编辑边框时出现问题。我在这里上传我的代码?
- mysql - 搜索电影名称
- lua - 确定一个变量是否来自 Lua 中多个值的列表
- python - 查找数据框行中的前 n 个值(Python)
- umbraco - 使用 Azure AD 的 WebApi 身份验证
- php - 尝试在 bool 上读取属性“slug”
- javascript - Angular 11 测试与 Jest - rxjs 计时器的 Aync 错误
- colors - Povray:看似等效的颜色渐变中的颜色间距不同
- java - 如何打开和关闭文件中的每个链接(Selenium\Java)
- javascript - 如何检测 AdSense 是否在 JavaScript 中加载了广告?