ngClass переключает определенный элемент только при использовании ngFor Angular5 - PullRequest
Новая
       9

ngClass переключает определенный элемент только при использовании ngFor Angular5

0 голосов
/ 31 августа 2018

Я хочу переключать определенный элемент при нажатии на событие щелчка и в цикле, чтобы переключить весь класс, означает, что все div-шоу. Вот мой код 

<div *ngFor="let xyz of abc">
    <span (click)="showOptions = !showOptions"></span>
    <ul [ngClass]="{show:showOptions}">
        <li> some text</li>
    </ul>
    <div>{{xyz}}</div>
</div>

Это должен открыть следующий элемент не все! любая помощь?

1 Ответ

0 голосов
/ 31 августа 2018

Это происходит потому, что вы используете одно логическое значение для каждого элемента цикла ngFor. Вы должны попытаться добавить логическое поле к элементам массива: 

abc = [
    {
        text: 'el1',
        show: false
    },
    {
        text: 'el2',
        show: false
    },
    {
        text: 'el3',
        show: false
    },
]

В вашем шаблоне: 

<div *ngFor="let xyz of abc">
    <span (click)="xyz.show = !xyz.show"></span>
    <ul [ngClass]="{show:xyz.show}">
        <li>{{xyz.text}}</li>
    </ul>
</div>

Примечание

Вы также можете использовать ngIf для отображения / скрытия списка опций: 

<ul *ngIf="xyz.show">
...