Angular 6 从另一个 ngFor 向 ngFor 元素添加活动类

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

当单击任何标题时，我想将活动类添加到数组 A 的每个元素的标题和正文。这对于数组 A 的第一个元素工作正常。对于所有剩余的元素，这都不适用于 body。

尝试代码 - [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 - 在正文部分中未设置活动类。