根据值返回字母等级

Question

我正在尝试使用ngSwitch根据指定的标准返回字母等级。我究竟做错了什么？有时，当我刷新页面时，它会返回所有5个字母的成绩。

A：100-90B：89-80C：79-70D：69-60F：<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使其全部满足条件。根据他们的文档“每个匹配的视图都将呈现。” ...尝试向每个表达式添加额外的检查，以检查低值和高值，仅使一个为真。如x> 59 && x <= 69

Answer 2

您的开关盒需要有上限：

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

另外：这实际上不是开关盒的预期功能，您可以使用*ngIf轻松地做到这一点。理想情况下，您需要在ngSwitch中评估的变量，然后将其所有可能的值视情况而定。