我可以在一个 div Angular 4 中使用 2 ngClass答案

【问题标题】：Can I use 2 ngClass in one div Angular 4我可以在一个 div Angular 4 中使用 2 ngClass
【发布时间】：2018-12-27 10:52:18
【问题描述】：

当我单击编辑时，我调用一个组件进行编辑，因此在该组件中我无法单击任何内容并且背景为黑色，但我希望每个 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;
  }
}

【问题讨论】：

不，你只能一个
你建议我改变什么或者这两个函数在一个 ngClass 中调用
如下[ngClass]="'name-block-width-' + valueItem.leve + {active: activeSelected === valueItem.id, 'name-block': true}"
你可以用+ ' ' +空格看看我的回答

标签： html css angular typescript

【解决方案1】：

你可以这样做

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

【讨论】：

【解决方案2】：

这样使用

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

【讨论】：

它正在工作，但它正在使用 z-index 制作所有数组，它可以只制作 TS 文件中选择的 id
它正在工作我已经改变了！previewmode并且它工作得超级好
是的，我更改为在我的代码中检查它的语法。对不起，我现在更正了:)
当我打开这个组件从左到右制作类似动画的时候你知道怎么制作吗？
我将编辑这篇文章并在那里编写动画代码:)

【解决方案3】：

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

按如下方式进行：

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

【讨论】：