首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >角ngclass如何使用多个类和条件

角ngclass如何使用多个类和条件
EN

Stack Overflow用户
提问于 2022-09-02 12:22:55
回答 1查看 24关注 0票数 0

嗨,我有一个包在div中的组件,我想根据类似的按钮点击来更改类名。我有大约5个CSS类,我希望能够在使用ng类之间切换div类。我的问题是,如何编写ng类,以便对每个类名使用多个布尔值?

EN

回答 1

Stack Overflow用户

发布于 2022-09-02 15:47:10

HTML代码

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div
  class="normal"
  [ngClass]="{
    green: selection.nature,
    blue: selection.sky,
    red: selection.love,
    yellow: selection.friendship
  }"
>
  <button (click)="select('nature')">NATURE</button>
  <button (click)="select('sky')">SKY</button>
  <button (click)="select('love')">LOVE</button>
  <button (click)="select('friendship')">FRIENDSHIP</button>
</div>

TS代码

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
selection = {
    nature: false,
    sky: false,
    love: false,
    friendship: false,
  };
  select(value: string) {
    Object.keys(this.selection).forEach((k) => (this.selection[k] = false));
    this.selection[value] = true;
  }

我已经创建了一个堆栈闪电战,如果您想要检查它的行动。请找到它,这里

如果它解决了您的查询,请将其标记为“答案”。快乐编码:)

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/73587627

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文