Return a letter grade based on value

Question

I am trying to return a letter grade based on specified criteria using ngSwitch. What am I doing wrong? Sometimes it returns all 5 letter grades when I refresh the page.

A: 100-90 B: 89-80 C: 79-70 D: 69-60 F: < 60

This is my app.component.html file:

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

This is my component.ts file: (this is assigning a random number using 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

Looks like your ngswitch is finding a condition where one or more statements are true. Example: x = 90 makes it so all meet the condition. Per their documentation "Every view that matches is rendered."... try adding an additional check to each expression to check for the low and high value to make only one true. Like x > 59 && x <= 69