Angular 6 将 active class 添加到来自另一个 ngFor 的 ngFor 元素

Question

我在 html 中有两个 ngFor 循环。一种用于显示 header，另一种用于 body。两者都在同一个数组上迭代（比如 A）。数组 A 是数组 B 的每一项的元素。示例：B[id:1, arrayA: A[]]。数组 B 在单独的 ngFor 循环中迭代，对于 A 和 B 都是 parent。

我想在单击任何 header 时向数组 A 的每个元素的 header 和 body 添加活动 class。这对于数组 A 的第一个元素工作正常。对于所有剩余的元素，这都不适用于 body。

尝试代码 - [class.active]="elementA.toggle" header 和 body 以及 header 点击 - （点击）="elementA.toggle = !elementA.toggle"

也尝试过 [ngClass]="elementA.toggle ? 'active' : ''" 只是在 header 而不是 body.

如果需要我可以分享代码。

在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 - Class 活动未在 Body 部分中设置。

Answer 1

<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-->

我的修复..

Angular 6 将 active class 添加到来自另一个 ngFor 的 ngFor 元素

Angular 6 add active class to ngFor element from another ngFor

angular

class

angular6

ngfor