根据JSON值应用CSS样式

问题描述：

我想将某些CSS应用于包含某个JSON值的特定部分。根据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 class="heading">{{ info.title | exclusionfilter }}</h2>

我想一些CSS应用到H2时的值“主要文章”。

我不认为这种做法是干净的，但不能认为替代

答

尝试使用动态CSS /类的角度结合：

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

其中redBackground是具有背景Red一个CSS类。

答

你必须使用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; 
}

根据JSON值应用CSS样式

相关推荐