如何解决使用角度
<div *ngFor="let value of values">`
<button>{{value}}</button>`
</div>
单击时,我需要更改所选按钮的背景颜色。
解决方法
- 使用HostListener为click事件创建指令
- 注入ElementRef和Renderer2
- 在主机侦听器方法中,调用renderer2.addClass(this.elemenentRef,'class-with-color-for-button')
这只是另一种方法,但是创建指令是如 Alexander 答案
中的适当方法<div *ngFor="let value of values">
<button #btn (click)="btn.classList.add('selected')">{{value}}</button>
</div>
如果您想切换课程,请使用toggle
而不是add
<button #btn (click)="btn.classList.add('selected')">{{value}}</button>
,
<mat-button-toggle-group multiple="true" appearance="legacy" name="fontStyle" aria-label="Font Style">
<mat-button-toggle value="bold">Bold</mat-button-toggle>
<mat-button-toggle value="italic">Italic</mat-button-toggle>
<mat-button-toggle value="underline">Underline</mat-button-toggle>
</mat-button-toggle-group>
使用
multiple="true"
对于多选选项
演示网址:Demo here
,例如,如果要打印日期并添加切换功能,则html应该是
<div *ngFor="let day of weekDays; let i = index" style="display: inline-block;">
<button mat-mini-fab [color]="day.status ? 'primary' : ''"
(click)="ChangeWeekDayStatus(i)">
{{day.text}}</button> </div>
</div>
并且您的.ts应该包含一个数组
weekDays: Week_Day[] = [
{
text: "MO",status: false
},{
text: "TU",status: true
},{
text: "WE",{
text: "TH",{
text: "FR",{
text: "SA",{
text: "SU",status: false
}
];
和用于处理切换的功能
ChangeWeekDayStatus(index:number){
this.weekDays[index].status=!this.weekDays[index].status;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。