时间戳

首页 > 解决方案 > 我可以在一个 div Angular 4 中使用 2 ngClass

html - 我可以在一个 div Angular 4 中使用 2 ngClass

问题描述

当我单击编辑时，我调用一个组件进行编辑，因此在组件中我无法单击任何内容并且背景为黑色，但我希望每个 ID 我选择编辑的内容处于活动状态或仅具有背景白色或 z -指数。

这是我的 HTML

<div class="name-block" [ngClass]="'name-block-width-' + valueItem.level"
  [ngClass]="{active: activeSelected === valueItem.id, 'name-block': true}" (click)="toggleExpand()">
</div>

这是CSS

.name-block {
  @extend %common-block;
  @include center(false, true);
  @include justify-content(space-between);
  margin-left: 1px;
  padding-left: 10px;
  &.active {
    z-index: 950;
  }

  div.businessId {
    @extend %flexbox;
    @include center(false, true);
    border-left: solid thin $border-color;
    padding: 0 5px;
    height: 100%;
  }
}

@for $i from 1 through 7 {
  .name-block-width-#{$i} {
    width: 500px - (($i - 1) * 50px);
  }
}

这是我尝试编辑时的 TS

edit(editOptions: EditViOptions) {
  this.showChild = !this.showChild;
  if (editOptions.valueItem || editOptions.appendToParentId) {
    this.dataToPass = editOptions;
    this.activeSelected = editOptions.valueItem.id;

  } else {
    this.activeSelected = null;
  }
}

标签： htmlcssangulartypescript

解决方案

像这样使用它

<div [class]="'name-block name-block-width-' + valueItem.level"  [ngClass]="{'active': activeSelected === valueItem.id}" (click)="toggleExpand()">abc</div>

推荐阅读