NgClass 在使用多个 class 申请时使用属性名称而不是 class 内容

Question

我正在尝试将多个（在我的例子中是 2）类应用到自定义组件上，该组件包含来自 MDBootstrap 的列表项组件：

App.module.ts

<custom-list-component size="w-50">
    <custom-list-item-component href="#">list item 1</custom-list-item-component>
    <custom-list-item-component href="#">list item 2</custom-list-item-component>
</custom-list-component>

自定义列表-component.component.html

<div [ngClass]="size" class="list-group">
  <ng-content></ng-content>
</div>

自定义列表-component.component.ts

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'custom-list-component',
  templateUrl: './custom-list-component.component.html',
  styleUrls: ['./custom-list-component.component.sass']
})
export class CustomListComponentComponent implements OnInit {

  @Input() size: string;
  testHorizontal: string = "list-group-horizontal";

  constructor() { }

  ngOnInit() {

  }
}

当我 "just" 像我在自定义列表组件 HTML 中那样应用 size 时，它应用 w-50 添加到列表中，使其显示在页面的 50% 上：

但是现在，我想应用第二个 "class"，我想应用 list-group-horizontal 到 div w- 50适用于它。我一直在查看文档并尝试了以下所有解决方案：

<some-element [ngClass]="'first second'">...</some-element>

<some-element [ngClass]="['first', 'second']">...</some-element>

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>

<some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>

<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>

例如，这不起作用：

<div [ngClass]="'size testHorizontal'" class="list-group">
  <ng-content></ng-content>
</div>

因为 w-50 和 list-group-horizontal 没有应用到 div，只有它们的名字。这也适用于上述其他选项。看起来像这样：

如何将属性的内容应用到 DIV 而不是他们的名字？

提前致谢。

Answer 1

ngClass 指令需要一个字符串作为 class 附加（在您的情况下）。

所以我们必须用我们的变量创建一个字符串。

[ngClass]="size +' '+ testHorizontal"

构造一个有两个变量的字符串size +' '+ testHorizontal

NgClass 在使用多个 class 申请时使用属性名称而不是 class 内容

NgClass uses property name instead of class content when using more than one class to apply

css

angular

ng-class

mdbootstrap

NgClass 在使用多个 class 申请时使用 属性 名称而不是 class 内容

NgClass uses property name instead of class content when using more than one class to apply

css

angular

ng-class

mdbootstrap

NgClass 在使用多个 class 申请时使用属性名称而不是 class 内容