ngClass仅在使用ngFor Angular5时切换特定元素

Question

我想在单击click事件时切换特定元素，并在循环中切换所有类，意味着所有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>

它应该打开下一个元素不是全部！任何帮助？

Answer 1

发生这种情况是因为您为每个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">