JSON値に基づいてCSSスタイルを適用する

Question

特定のJSON値を含む特定のセクションにいくつかのCSSを適用しようとしています。

"メイン記事"という単語を含むテキストに赤い背景を追加したいとします。

私は

@Pipe({ 
name: 'exclusionfilter', 
pure: false 
}) 

@Injectable() 
export class ExclusionFilterPipe implements PipeTransform { 
    transform(value: any) { 
    if((value!=null)&& (value.toLowerCase().indexOf("main article") != -1)){ 
     return ''; 
    } 
    else return value; 
    } 
} 

以下のようにパイプを使用して値を隠すために管理しているとマークアップが価値がある時はいつでも私はH2にいくつかのCSSを適用するこの

<h2 class="heading">{{ info.title | exclusionfilter }}</h2> 

のようなものです"主な記事"。

私は、このアプローチがクリーンであることと思ういけない、しかし、あなたが、その場合にはElementRefを使用する必要が代替

Answer 1

は、角度の結合動的CSS /クラスを使用してみてください：

redBackground背景 Redを有するCSSクラスである

<h2 class="heading" [ngClass]='{"redBackground" : info?.title == "main article"}'>{{ info.title | exclusionfilter }}</h2> 

。

Answer 2

を考えるカント。 DOMからの要素を検索し、たとえば以下のように、必要なスタイルを適用する：まず、あなたが必要なテキストを持つ要素を検索し、あなたが以下のようにそれを呼び出すスタイルを追加するためのDOMレベルで知っている場合は、スタイル

this.el.nativeElement.getElementsByClassName("k-grouping-header")[0].style.display = "block"; 

を適用します。

HTML：

<div [ngStyle]="setStyles()"> 

活字体：

private setStyles(): any { 

    let styles = { 
     'font-size': '10px' 
    }; 

    return styles; 
}