Angular 中的 ngClass 未应用

Question

我正在尝试在 Angular 中使用 [ngClass]，但似乎没有得到应用。类似 css 样式的令人惊讶的 [ngStyle] 正在运行。我在这里做错了什么？控制台中没有错误。当我检查开发工具时，类被应用到标签但不在浏览器视图中。我尝试了所有不同的选项 - class、[class]、[ngClass]、ngClass。我也尝试了 className 和 ngClass。

请查找附件中的plunker以供参考：

https://plnkr.co/edit/ipMxdTzoHUl5YCPJSpLT?p=preview

@Component({
    selector: 'aboutus',
    template:`
        <span class="classone classtwo">{{vari.title}}</span>
        <br>
        <div ngClass="['classone','classtwo']">{{vari.title}}</div>
         <br>
         <div [ngClass]="['classone','classtwo']">{{vari.title}}</div>
        <br>
        <div [className]="classdef">{{vari.title}}</div>
    `,
    styles: [`
        .classone{
            font-weight: 'normal' !important;
        }
        .classtwo{
            font-size: '40px' !important;
        }
        `
    ]
})
export class AboutusComponent implements OnInit, OnDestroy {
    vari: any = {title: 'test'}
    classdef: any[] = ['classone', 'classtwo']
    constructor() { }

}

Answer 1

我正在创建plunker它会帮助你

您的 html

中的代码

<div>
      <h2 [ngClass]='{"active":true}'>Hello {{name}}</h2>
    </div>

Answer 2

问题出在您的css。

替换此

  .classtwo{
        font-size: '40px' !important;
    }

到

 .classtwo{
        font-size: 40px !important;
    }

//我们的根应用组件

    import {Component, NgModule, VERSION, OnInit, OnDestroy} from '@angular/core'
    import {BrowserModule} from '@angular/platform-browser'
    import {CommonModule} from '@angular/common'
    @Component({
        selector: 'my-app',
        template:`
            <span class="classone classtwo">{{vari.title}}</span>
            <br>
            <div ngClass="['classone','classtwo']">{{vari.title}}</div>
            <br>
            <div [ngClass]="['classone','classtwo']">{{vari.title}}</div>
            <br>
            <div [className]="classdef">{{vari.title}}</div>
        `,
        styles: [`
            .classone{
                font-weight: normal !important;
            }
            .classtwo{
                font-size: 40px !important;
            }
            `
        ]
    })

https://plnkr.co/edit/acLvnOvezEFI4EXjKbVx?p=preview

Angular 中的 ngClass 未应用

ngClass in Angular not applied

css

angular-ng-class

angular