时间戳

首页 > 解决方案 > 如何在 Angular 2 中切换单击单个元素 CSS 类？

javascript - 如何在 Angular 2 中切换单击单个元素 CSS 类？

问题描述

我正在循环通过 API 响应并使用以下代码在页面上显示一些项目（女性和男性年龄组）：

<ng-container *ngFor="let event of day.availableEvents">
    {{ event.name }}
    <br>
    <ng-container *ngFor="let maleAgeGroup of event.maleAgeGroups">
      <span [class.is-active]="status" (click)="updateStatus()" {{ maleAgeGroup }}</span>
    </ng-container>
</ng-container>

而且，这是我正在使用的 JSON 数据：

"days": [
  {
    "date": "2021-04-14T00:00:00.000Z",
    "availableEvents": [
      {
        "id": 1,
        "name": "Event A",
        "femaleAgeGroups": ["U13", "U15", "U17"],
        "maleAgeGroups": ["U13", "U15", "U17"]
      },
      {
        "id": 2,
        "name": "Event B",
        "femaleAgeGroups": ["U13", "U15", "U17"],
        "maleAgeGroups": ["U13", "U15", "U17"]
      },
    ]
  }
]

单击一个年龄组时，我想将其状态从真或假切换，以便is-active添加/删除 CSS 类。

无论我尝试什么 SO 答案，我都无法让它工作，并且在大多数情况下最终会出现“无法将状态分配给类型字符串”之类的错误。这就是为什么我将上面的代码从基础剥离——也许是因为我的数据的结构方式？

下面的示例是我试图结束的示例，其中突出显示的文本已被单击并is-active应用了类：

所需输出示例

标签： javascriptangulartypescript

解决方案

[class.is-active]需要“绑定”到一个值，我不清楚你作为一个整体尝试做的事情的意图，但是，每个年龄组都需要一个状态。因此，您需要从服务器更新/修改您的数据，或者在您的组件中增加每个年龄段的状态...

"femaleAgeGroups": [{name:"U13", active:true}, {name:"U15", active:false}, {name:"U17", active:false}], etc..

然后在模板中，您可以将 css 类绑定到布尔值

 <ng-container *ngFor="let maleAgeGroup of event.maleAgeGroups">
      <span [class.is-active]="maleAgeGroup.active" (click)="updateStatus(maleAgeGroup)" {{ maleAgeGroup.name }}</span>
    </ng-container>

..并更新您将项目传递给更新功能并更新其活动状态：

updateStatus(item:any): void {
   item.active = !item.active;
}

推荐阅读