Question

当我单击编辑时，我调用一个要进行编辑的组件，因此在该组件中，我无法单击任何东西，并且没有背景黑色，但我希望为每个ID选择一个要激活的或仅具有背景的内容白色或Z-index。

这是我的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;
  }
}

Answer 1

像这样使用它

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

Answer 2

在每个选择器中只能使用[ngClass]一次：

执行以下操作：

 [ngClass]="'name-block-width-' + valueItem.leve + ' '+ {active: activeSelected === valueItem.id, 'name-block': true}"

Answer 3

您可以这样做

testing tags

我可以在一格Angular 4中使用2 ngClass吗

3 个答案: