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

Я хочу переключить конкретный элемент при нажатии на событие щелчка и его цикл для переключения всего класса, что означает все показы 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>

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


angular ngfor angular5 ng-class
person Ritesh Arora    schedule 31.08.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Это происходит потому, что вы используете одно логическое значение для каждого элемента цикла 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">
person Augustin R    schedule 31.08.2018
comment
@Augustine, я не могу добавить show: false в элемент объекта, это типично для добавления, потому что эта группа объектов имеет сложную иерархию и может исчисляться тысячами !! любая другая идея - person Ritesh Arora; 31.08.2018
comment
Извините, я не понимаю ваш комментарий. Поле можно легко добавить с помощью цикла for в функции подписки. Насколько я знаю, другого простого способа сделать нельзя. - person Augustin R; 31.08.2018