Question

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

请找到附带的plunker以供参考：

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

ngClass

Answer 1

问题在你的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

Answer 2

我正在制作plunker它会帮助你

你的HTML中的代码

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

Angular中的ngClass未应用

2 个答案: