基于 JSON 值应用 CSS 样式答案

【问题标题】：Apply CSS style based on JSON value基于 JSON 值应用 CSS 样式
【发布时间】：2017-08-31 00:38:06
【问题描述】：

我正在尝试将一些 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>

每当值为“主文章”时，我想对 h2 应用一些 CSS。

我不认为这种方法是干净的，但想不出替代方案

【问题讨论】：

标签： html css json angular

【解决方案1】：

尝试使用 angular 的动态 css/class 绑定：

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

其中redBackground 是具有背景Red 的css 类。

【讨论】：

【解决方案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;
}

【讨论】：