blocks|key|2194612|text|这是添加动态类的一种方法|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2194613|<p+[class.boldClass]="isbold"
+++[class.italicsClass]="isItalic">testing+content+|code-block|syntax|javascript|2194614|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This is one way you can add dynamic classes

<pre><code>&lt;p [class.boldClass]="isbold"
 [class.italicsClass]="isItalic"&gt;testing content &lt;/p&gt;
</code></pre>

blocks|key|2510722|text|[ngClass]="{'italicsClass':isItalic,'boldClass':isbold}"|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2510723|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>[ngClass]="{'italicsClass':isItalic,'boldClass':isbold}"
</code></pre>

blocks|key|2194607|text|问题出在您的JSON上，当您声明一个JSON时，它的属性不应该带有"="，请尝试使用以下内容：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2194608|addClasses(){
++let+classes={
++++boldClass:+this.isbold,
++++italicsClass:+this.isItalic
++};
++return+classes;
}|code-block|syntax|javascript|2194609|在this.isbold之后有一个挂起的"，“，而且你有this.Italic，它应该是this.isItalic。|2194610|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

The issue is with your JSON, when you declare a JSON, the properties of it shouldn't be with the "=", try to use something like:

<pre><code>addClasses(){
 let classes={
 boldClass: this.isbold,
 italicsClass: this.isItalic
 };
 return classes;
}
</code></pre>

There was a pending "," after this.isbold, and also, you had this.Italic, and it should be this.isItalic.

blocks|key|2510718|text|尝试使用Angular的Renderer2|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2510719|@ViewChild('el')+element:+ElementRef
constructor(private+renderer:+Renderer2)+{
}

addClasses(classes:+Array<string>){
++classes.forEach(class+=>+this.renderer.addClass(this.element.nativeElement,+'someClass'))

}



+<p+#el>testing+content+|code-block|syntax|javascript|2510720|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Try using Angular's Renderer2

<pre><code>@ViewChild('el') element: ElementRef
constructor(private renderer: Renderer2) {
}

addClasses(classes: Array&lt;string&gt;){
 classes.forEach(class =&gt; this.renderer.addClass(this.element.nativeElement, 'someClass'))

}



 &lt;p #el&gt;testing content &lt;/p&gt;
</code></pre>

blocks|key|2856175|text|ts：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2856176|import+{+Component+}+from+'@angular/core';

@Component({
++selector:+'my-app',
++templateUrl:+'./app.component.html',
++styleUrls:+[+'./app.component.css'+]
})
export+class+AppComponent++{
++isbold:+boolean+=+false;
++isItalic:+boolean+=+true;

++addClasses()+{
+++++let+classes+=+{
+++++++boldClass:+this.isbold,
+++++++italicsClass:+this.isItalic
+++++};
+++++return+classes;
+++}
}|code-block|syntax|javascript|2856177|模板：|2856178|<p+[ngClass]="addClasses()">testing+content+|2856179|css：|2856180|.boldClass+{
+++font-weight:+bold;
}

.italicsClass+{
+++font-style:+italic;
}|2856181|Demo|offset|length|2856182|entityMap|0|LINK|mutability|MUTABLE|url|https://stackblitz.com/edit/angular-qfk38x?file=src%252Fapp%252Fapp.component.ts^0|0|0|0|0|0|0|0|4|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|14|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|16|8|@]|9|@$Q|17|R|18|1|19]]|A|$]]|$1|S|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

ts:

<pre><code>import { Component } from '@angular/core';

@Component({
 selector: 'my-app',
 templateUrl: './app.component.html',
 styleUrls: [ './app.component.css' ]
})
export class AppComponent {
 isbold: boolean = false;
 isItalic: boolean = true;

 addClasses() {
 let classes = {
 boldClass: this.isbold,
 italicsClass: this.isItalic
 };
 return classes;
 }
}
</code></pre>

template:

<pre><code>&lt;p [ngClass]="addClasses()"&gt;testing content &lt;/p&gt;
</code></pre>

css:

<pre><code>.boldClass {
 font-weight: bold;
}

.italicsClass {
 font-style: italic;
}
</code></pre>

<a href="https://stackblitz.com/edit/angular-qfk38x?file=src%2Fapp%2Fapp.component.ts" rel="nofollow noreferrer">Demo</a>

Here I want to add CSS classes dynamically to the element using ngClass directive in angular.js.

<pre><code>&lt;p [ngClass]="addClasses()"&gt;testing content&lt;/p&gt;
</code></pre>

and below is my ts code:

<pre><code>isbold: boolean = false;
isItalic: boolean = true;

addClasses() {
 let classes = {
 boldClass: this.isbold,
 italicsClass: this.isItalic
 };
 return classes;
}
</code></pre>

boldClass and italicsClass are two classes in my css file, these classes should apply depending on the value in the corresponding boolean variables.
But I'm getting the error as Can not find name for both boldClass and italicsClass. Any help appreciated.

How to access css classes in typescript file?

JSON

在这里，我想使用angular.js中的ngClass指令将CSS类动态添加到元素中。testing content下面是我的ts代码：isbold: boolean = false;isItalic: boolean = true;addClasses(...

问如何访问typescript文件中的css类？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何访问typescript文件中的css类？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何访问typescript文件中的css类？
EN