AngularのngClassが適用されていません

Question

[ngClass]をAngularで使用しようとしており、適用されていないようです。同様のCSSスタイルのための驚くべき[ngStyle]が機能しています。私はここで間違っていますか？コンソールにエラーはありません。私が開発ツールをチェックすると、クラスはタグには適用されていますが、ブラウザのビューには適用されません。私はすべての異なるオプションを試しました - class、[class]、[ngClass]、ngClass私はclassNameとngClassの両方を試しました。

参考のために添付plunker見つけてください：私はそれはあなた

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

Answer 1

問題がであるあなたのhtmlで

コードを助ける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 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