Angular 2 - 仅在单个元素上切换类

Question

我有一个看似如下的元素列表：

 <ul *ngFor="let period of periodsDate">
        <li                         
        [class.show]="isShown" (click)="toggleClass()">
        <a>{{ period.id }} </a>
        </li>
</ul>

我添加/删除＆＃39; show＆＃39;使用以下方法进行分类：

toggleClass() {
        this.isShown = !this.isShown;
    }

我遇到的问题是，由于有多个<li>元素，因此每次点击其中任何一个元素时，都会显示＆＃39; class被添加到所有这些中。 我想要实现的是课程“显示”。只会添加到刚刚点击的<li>元素中。

Answer 1

与对象period一起使用，不要创建另一个对象 尝试以下代码

<ul *ngFor="let period of periodsDate">
    <li class="dropdown__nested" [class.show]="period.isShown" (click)="toggleClass(period)">
        <a>{{ period.key }} </a>
    </li>
</ul>

Typscript

toggleClass(period) {
    period.isShown = !period.isShown;
}