ngClass僅在使用ngFor Angular5時切換特定元素

Question

我想在單擊事件上單擊時切換特定元素，並在其循環中切換所有類，表示所有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">