Return 基于价值的字母等级

Question

我正在尝试 return 使用 ngSwitch 根据指定标准对字母进行评分。我究竟做错了什么？有时，当我刷新页面时 return 全部 5 个字母等级。

甲：100-90 乙：89-80 C：79-70 D：69-60 女：< 60

这是我的 app.component.html 文件：

<h1>
  Your grade is a {{x}} percent.
</h1>

<div [ngSwitch]="true">
  <p *ngSwitchCase="x > 89">A</p>
  <p *ngSwitchCase="x > 79">B</p>
  <p *ngSwitchCase="x > 69">C</p>
  <p *ngSwitchCase="x > 59">D</p>
  <p *ngSwitchDefault>F</p>
</div>

这是我的 component.ts 文件：（这是使用 Math.random 分配一个随机数）

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'title';
  x: number;

  ngOnInit(){
    this.x = Math.floor(Math.random()*100 - 20 + 1) + 20;
  }
}

Answer 1

看起来您的 ngswitch 正在寻找一个或多个语句为真的条件。示例：x = 90 使它全部满足条件。根据他们的文档 "Every view that matches is rendered."... 尝试向每个表达式添加额外的检查以检查低值和高值以确保只有一个为真。喜欢 x > 59 && x <= 69

Answer 2

您的 switch case 需要有上限：

<div [ngSwitch]="true">
    <p *ngSwitchCase="x > 89">A</p>
    <p *ngSwitchCase="x > 79 && x <= 89">B</p>
    <p *ngSwitchCase="x > 69 && x <= 79">C</p>
    <p *ngSwitchCase="x > 59 && x <= 69">D</p>
    <p *ngSwitchDefault>F</p>
</div>

旁白：这并不是 switch case 的预期功能，您可以使用 *ngIf 轻松完成此操作。理想情况下，您希望在 ngSwitch 中评估的变量，然后是其所有可能的值作为个案。

Return 基于价值的字母等级

Return a letter grade based on value

javascript

ng-switch

angular