[SOLVED] Return a letter grade based on value

Return a letter grade based on value

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

Solution

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