[英]How to set active class on clicked button only using Angular6?
I have 3 buttons in a row.我连续有 3 个按钮。 I want to set active class on clicked button only but problem is when i clicked another button after one button so it is setting active class on all buttons.我只想在单击的按钮上设置活动类,但问题是当我在一个按钮后单击另一个按钮时,它会在所有按钮上设置活动类。
Set active class is not working correctly.设置活动类工作不正常。 All buttons get active class when clicked.单击时,所有按钮都会获得活动类。 If i will click on 2 buttons it will set active class on both button when clicked.如果我将点击 2 个按钮,它会在点击时在两个按钮上设置活动类。
Here is my code at stackblitz这是我在 stackblitz 上的代码
i want to set active class only on clicked button at a time not on all the buttons.我想一次只在单击的按钮上设置活动类,而不是在所有按钮上。
I think that you can do this more easy, with angular dom features.我认为您可以使用 angular dom 功能更轻松地做到这一点。
You can show here:您可以在此处显示:
https://stackblitz.com/edit/angular-s8suc8?file=src/app/app.component.ts https://stackblitz.com/edit/angular-s8suc8?file=src/app/app.component.ts
it is a sample that I think that you want, but I think that you can do it better:这是我认为您想要的示例,但我认为您可以做得更好:
https://stackblitz.com/edit/angular-vmzijo?file=src/app/app.module.ts https://stackblitz.com/edit/angular-vmzijo?file=src/app/app.module.ts
as far as i can understand you need to toggle on active and inactive status:据我所知,您需要切换活动和非活动状态:
This is the new plunker , have a look if it solves the issue:这是新的 plunker ,看看它是否解决了问题:
https://stackblitz.com/edit/angular-fzxhkv?file=src/app/app.component.ts https://stackblitz.com/edit/angular-fzxhkv?file=src/app/app.component.ts
I have removed event.srcElement.classList.add('phase-active')
which was responsible for applying phase-active
on every button我已经删除了event.srcElement.classList.add('phase-active')
它负责在每个按钮上应用phase-active
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.