[英]Angular 8 toggle CSS class using ngFor on click
I have found similar scenarios to this one, but I haven't yet found this exact scenario.我发现了与此类似的场景,但我还没有找到这个确切的场景。 Sorry if I missed it.
对不起,如果我错过了。
In Angular 8, I am using an *ngFor to iterate through some message objects.在 Angular 8 中,我使用 *ngFor 来遍历一些消息对象。 This displays the message title and date/time in a row of vertical boxes to the left of the screen.
这将在屏幕左侧的一行垂直框中显示消息标题和日期/时间。 What I'm trying to get to is when one box is clicked, it becomes active and changes color.
我想要达到的是,当单击一个框时,它会变为活动状态并更改颜色。 I have this working, but the problem is that the "active" class does not inactivate when another box is clicked.
我有这个工作,但问题是“活动”类在单击另一个框时不会停用。 This is the problem I'm trying to solve.
这是我试图解决的问题。
Here is my current code with CSS:这是我当前使用 CSS 的代码:
<div *ngFor="let msg of messages; let i = index">
<a class="list-group-item list-group-item-action"
data-toggle="list" href="#home" role="tab"
[ngClass]="{ 'active' : isActive}" (click)="popIt(i)">
<span id="msgSubject1">{{msg.Subject}}</span>
<br />
<span class="datetimeCls" id="datetime1">
{{msg.DateCreated | date : 'short' }}
</span>
</a>
</div>
popIt(num: string) {
var number = num;
this.SubjectDisplay = this.messages[num].Subject;
this.DateDisplay = this.messages[num].DateCreated;
this.TextDisplay = this.messages[num].Body;
}
.list-group .list-group-item {
color: grey;
font-weight: bold;
font-family:"Gill Sans" Verdana;
font-size: 15px;
background-color: #FFFFFF;
}
.list-group .list-group-item.active {
background-color: lightgray !important;
border-top: solid 2px grey;
border-bottom: solid 2px grey;
color: grey;
}
This displays the object properties as expected, the clicks work, but it makes every box active as they're clicked.这会按预期显示对象属性,点击工作,但它使每个框在点击时都处于活动状态。 They do not inactivate.
它们不会失活。
Any direction, suggestions or examples would be appreciated!任何方向,建议或示例将不胜感激! Thank you!
谢谢!
One way to do it is to have an activeMessage
property:一种方法是拥有一个
activeMessage
属性:
public activeMessage: Message; // Use the appropriate type here
which is set on click and tested in the class binding:这是在单击时设置并在类绑定中测试的:
<div *ngFor="let msg of messages">
<a [class.active]="msg === activeMessage"
(click)="activeMessage = msg; doOtherStuff()" ... >
...
</a>
</div>
See this stackblitz for a demo.有关演示,请参阅此 stackblitz 。
Change your code and store information in your parent
component about some unique identifier of message
which was clicked.更改您的代码并在您的
parent
组件中存储有关单击的message
某些唯一标识符的message
。 And then you can easily add click listener to component and inside of parent
component update stored id.然后您可以轻松地将单击侦听器添加到组件和
parent
组件内部更新存储的 id。 But you have to change a little you HTML [ngClass]
directive, to return true
if message.Id===clickedMessageId
.但是你必须稍微改变你的 HTML
[ngClass]
指令,如果message.Id===clickedMessageId
返回true
。 Or you can store whole message in fe clickedMessage
, then you can do message===clickedMessage
.或者您可以将整个消息存储在 fe
clickedMessage
,然后您可以执行message===clickedMessage
。 Another way you can achieve it, you can create custom directive
and service
, when you click directive
notify service
to unclick every other object.另一种实现它的方法是,您可以创建自定义
directive
和service
,当您单击directive
通知service
以取消单击其他所有对象时。 But you have to remember to remove them from service, once directive
has been destroyed.但是您必须记住,一旦
directive
被销毁,就将它们从服务中删除。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.