Question

我正在尝试创建以下UI / UX按钮：
.. [2015] [2016] [2017]

默认情况下，当前年份（在撰写时，2017年）被“选中”，当用户点击“2015”时，应取消选择“2017”和“2016”（这些按钮是'互斥的“）

按钮是从外部数据源生成的，为我提供数年的数据：

<button *ngFor="let year of styles.years"  type="button" name="button" class="btn btn-default" id="{{year.year}}">
  {{year.year}}
</button>

如何创建按钮系统，其中一个按钮是“自动选择”，当选择“其他”按钮时，它会取消选择主动选择的按钮，并将现在单击的按钮设置为“已选择”？

Answer 1

在组件(click)中设置属性，并通过将逻辑绑定到按钮的<button *ngFor="let year of styles.years" [ngClass]="{ active: activeYear === year }" (click)="activeYear = year.year" type="button" name="button" class="btn btn-default" id="{{year.year}}"> {{year.year}} </button>来控制它

:-moz-any(selector1, selector2, etc)

Heres a working Plunker demonstrating this

Answer 2

对于那些想要使用多个类的人，比如我的情况：添加逗号，然后添加新样式：condition。

[ngClass]="{ selected: activeYear === year.year, 'btn-default': activeYear !== year.year}"

希望这也有助于其他人

Angular2动态按钮，一次只能选择一个

2 个答案: