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

Question

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

当前年份（在撰写本文时为 2017 年）默认为 'selected'，但是，当用户单击“2015”时，应取消选择“2017”和“2016”（这些按钮是 'mutually exclusive')

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

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

How can I create a system of buttons where one button is 'auto-selected', and when 'other' button is selected, it deselects the button that's actively selected, and sets the now clicked button to 'selected'?

Answer 1

在组件 activeYear 中设置一个属性并通过绑定逻辑到按钮 (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>

Heres a working Plunker demonstrating this

Answer 2

对于那些想使用多个类的人，比如我的情况：添加一个逗号，并添加一个新的 style:condition.

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

希望这对其他人也有帮助

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

Angular2 dynamic buttons where only one can be selected at a time

javascript

angular2-template

angular2-databinding

angular