Javascript 角度2-仅在单个元素上切换类

我有一个元素列表，如下所示：

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

我遇到的问题是，由于有多个

元素，因此每次单击其中任何一个元素时，“show”类都会添加到所有元素中。

---

我想要实现的是，类“show”只添加到刚才单击的

元素中。

与对象

期间一起使用，不要创建其他对象
试试下面的代码

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

period.isShown=！period.isShown（将period作为参数传递到toggleClass）这是可行的，但为什么我需要延长period？似乎是多余的。您是否为
期间创建了类？如果是，您可以在该类中添加
isShown:boolean
。@greattacheronizuka:因为您处于for循环中，toccleClass函数参数必须是某个值，否则您如何猜测必须更改哪些周期数据？有两种方法可以处理此问题：1）Sanjay提供的方法：使用toggleClass函数，将对元素的引用传递给它，并切换属性。2） 通过添加切换isShown变量的函数来扩展“period”对象。两者都很好，但对我来说，第二个更干净。注意：toggleClass（）函数中的
this
不是您所期望的。
<ul *ngFor="let period of periodsDate">
    <li class="dropdown__nested" [class.show]="period.isShown" (click)="toggleClass(period)">
        <a>{{ period.key }} </a>
    </li>
</ul>

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