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;
}

Angular2更改活动卡/ div的卡背景

1 个答案: