Question

我在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-未在“正文”部分中设置“活动类别”。

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将活动类从另一个ngFor添加到ngFor元素

1 个答案: