Question

我正在尝试将一些CSS应用于包含特定JSON值的特定部分。

假设我想在包含单词＆＃34;主要文章＆＃34;的文本中添加红色背景。

我设法通过使用下面的管道来隐藏价值

@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>

每当值为＆＃34;主要文章＆＃34;我想将一些CSS应用于h2。

我不认为这种方法很干净，但不能考虑替代方案

Answer 1

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

<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;
}

根据JSON值应用CSS样式

2 个答案: