Question

我想在单击事件时切换特定元素，并在其in循环中切换所有类，表示所有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">

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

1 个答案: