返回基于值的字母等级

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随机分配一个随机数(

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正在找到一个条件，其中一个或多个语句为true。示例：x=90使其全部满足条件。根据他们的文档"每个匹配的视图都会被呈现。"……尝试在每个表达式中添加一个额外的检查，以检查低值和高值，从而使其中一个值为真。像x>59&amp；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中计算变量，然后将其所有可能的值作为案例。