ngClass 用于多条件数字

Question

我想根据用户的分数更改类名。

例如，如果用户得到小于或等于 30，则类名应beginner，如果用户得到 31-75 之间，则类名应intermediate。如果用户高于 76，则类名为expert。

到目前为止，我有这个不是我完全需要的：

[ngClass]="marks.score<=30 ? 'beginner' : 'expert'"

Answer 1

试试这个：

[ngClass]="marks.score <= 30 ? 'beginner' : marks.score > 30 && marks.score <= 75 ? 'intermediate': 'expert'"

Answer 2

您可以指定多个类，每个类都有一个条件：

[ngClass]="{'beginner': marks.score <= 30, 'intermediate': marks.score >= 31 || marks.score <= 75, 'expert': marks.score >= 76}"

使用对象语法，每个键都是类名，值是用于确定类是否存在的表达式。

{ 'className': expression, ... }

Answer 3

一个选项，您可以使用自定义管道来考虑它，该管道采用分数数字值并返回 CSS 类的字符串。这将与[class]结合使用 优点是管道在缓存值方面做得很好，因此如果重复分数数字值，管道将能够返回该缓存值：

管：

import { Pipe, PipeTransform } from "@angular/core";
@Pipe({
name: "marks"
})
export class MarksPipe implements PipeTransform {
transform(value: number, args?: any): string {
if (value >= 76) {
return "expert";
} else if (value > 30 && value <= 75) {
return "intermediate";
} else if (value <= 30) {
return "beginner";
} else {
return "";
}
}
}

模板(具有不同分数值的示例用法(：

<div [class]="30 | marks">beginner</div>
<div [class]="65 | marks">intermediate</div>
<div [class]="82 | marks">expert</div>

或者，如果您需要使用ngClass进行 CSS 类合并：

<div class="foo" [ngClass]="30 | marks">beginner</div>
<div class="bar" [ngClass]="65 | marks">intermediate</div>
<div class="baz" [ngClass]="82 | marks">expert</div>

下面是一个实际示例。

Answer 4

在你的 css 文件中

.beginner {color: red}
.intermediate{color: yellow}
.expert { color: green}
.other { color: pink}

在您的打字稿文件中

marks = [10, 20, 30, 40 , 50 , 60 , 70 , 80, 90, 100, 110, 120];
getClass(mark){
if(mark <= 30)
return 'beginner';
else if (mark <= 75)
return 'intermediate';
else if (mark <= 100)
return 'expert';
else return 'other';
}

在你的网页中

<ul>
<li *ngFor="let mark of marks">
<div [ngClass]="getClass(mark)">{{ mark }}</div>
</li>
</ul>

堆栈闪电战示例