Angular2为活动卡片/ div更改卡片背景

Question

我有一个显示为卡片的列表：

<div class="mdl-grid">
    <div class="mdl-cell mdl-cell--2-col">
        <div class="goal-list-card" *ngFor="let goal of core_goals| values; let j = index;">
            <div class="card-title">
                <h6 class="">{{goal.title}}</h6>
            </div>
            <div class="card-action-button">
                <button (click)="editGoal(goal)" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                    Edit
                </button>
            </div>
       </div>
    </div>
</div>

单击Edit 按钮将打开一个显示所选元素详细信息的div。

这些卡片的 CSS：

.goal-list-card {
  width: 200px;
  min-height: 20px;
  background: #FAFAFA;
  margin-bottom: 5px;
  box-shadow: 2px 2px 2px #888888;

}

.goal-list-card .card-title{
  margin-left: 5px;
  margin-top: 5px;
}

.goal-list-card .card-action-button{
  padding: 2px;
}

我想更改用户当前正在查看其详细信息的卡片的颜色。如果他点击另一张卡片的Edit，那张卡片的颜色就会改变。

我该怎么做？

Answer 1

我假设您要标记当前正在编辑的目标的卡片。 您可以将goal.id（假设您在该对象中有id）保存到某个变量中。 感谢使用它在卡片 div 上设置类：

HTML

<div class="mdl-grid">
    <div class="mdl-cell mdl-cell--2-col">
        <div class="goal-list-card" *ngFor="let goal of core_goals| values; let j = index;" [ngClass]="{'active': selectedGoal == goal.id}">
            <div class="card-title">
                <h6 class="">{{goal.title}}</h6>
            </div>
            <div class="card-action-button">
                <button (click)="editGoal(goal)" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                    Edit
                </button>
            </div>
       </div>
    </div>
</div>

组件

editGoal(goal) {
    // Some code for your logic
    this.selectedGoal = goal.id;
}