Angular 6 добавляет активный класс в элемент ngFor из другого ngFor - PullRequest
Новая
       15

Angular 6 добавляет активный класс в элемент ngFor из другого ngFor

0 голосов
/ 14 мая 2019

У меня есть два цикла ngFor в html.один для показа заголовка и один для тела.Оба повторяются в одном массиве (скажем, A).Массив A является элементом каждого элемента массива B. пример: B [id: 1, arrayA: A []].Массив B повторяется в отдельном цикле ngFor, который является родительским для A и B.

Я хочу добавить активный класс как в заголовок, так и в тело каждого элемента массива A при нажатии любого заголовка.Это нормально работает для 1-го элемента массива А. И для всех остальных элементов это не работает для тела.

Пробные коды - [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>

этот код работаетштраф за 1-й элемент в категории, т.е.но для category_B - активный класс не установлен в разделе тела.

1 Ответ

0 голосов
/ 15 мая 2019 
<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-->

МОЯ ФИКСАЦИЯ.

...