Question

我已经找到了与此相似的场景，但是我还没有找到确切的场景。对不起，如果我错过了。

在Angular 8中，我使用* ngFor来迭代某些消息对象。这将在屏幕左侧的垂直框中显示消息标题和日期/时间。我要尝试的是单击一个框，它变为活动状态并改变颜色。我有这个工作，但是问题是当单击另一个框时，“活动”类不会失效。这是我要解决的问题。

这是我当前使用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;
}

这将按预期显示对象属性，单击将起作用，但是使每个框在单击时均处于活动状态。它们不会灭活。

任何方向，建议或示例将不胜感激！谢谢！

Answer 1

一种实现方法是拥有activeMessage属性：

public activeMessage: Message; // Use the appropriate type here

在点击时设置并在类绑定中进行了测试：

<div *ngFor="let msg of messages">
  <a [class.active]="msg === activeMessage"
    (click)="activeMessage = msg; doOtherStuff()" ... >
    ...
  </a>
</div>

有关演示，请参见this stackblitz。

Answer 2

更改代码，并将有关parent的某些唯一标识符的信息存储在message组件中。然后，您可以轻松地将点击侦听器添加到组件中，并在parent组件更新存储的ID内。但是您必须稍稍更改HTML [ngClass]指令，如果true返回message.Id===clickedMessageId。或者您可以将整个邮件存储在f.e. clickedMessage，则可以执行message===clickedMessage。实现此目标的另一种方法是，可以创建自定义directive和service，当您单击directive时，通知service取消单击其他所有对象。但是，一旦directive被销毁，您必须记住将它们从服务中删除。

Angular 8在单击时使用ngFor切换CSS类

2 个答案: