根據JSON值應用CSS樣式

Question

我想將某些CSS應用於包含某個JSON值的特定部分。

可以說我想爲包​​含單詞「主要文章」的文本添加紅色背景。

我設法用管道像下面

@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 class="heading">{{ info.title | exclusionfilter }}</h2> 

我想一些CSS應用到H2時的值「主要文章」。

我不認爲這種做法是乾淨的，但不能認爲替代

Answer 1

嘗試使用動態CSS /類的角度結合：

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

其中redBackground是具有背景Red一個CSS類。

Answer 2

你必須使用ElementRef在那種情況下。從DOM查找元素和應用所需的樣式如下例所示：首先找到誰擁有你所需的文本元素，然後將風格

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

如果你知道在DOM水平，添加樣式如下稱之爲：

HTML：

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

打字稿：

private setStyles(): any { 

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

    return styles; 
}