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

您可以使用custom pipe来考虑此选项，该选项采用分数值并返回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>

这里是example的动作。

希望有帮助！

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

在您的html

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

Stackblitz Example

ngClass用于多个条件数

4 个答案: