Вернуть буквенную оценку на основе значения - PullRequest
Новая
       29

Вернуть буквенную оценку на основе значения

0 голосов
/ 10 марта 2020

Я пытаюсь вернуть буквенную оценку на основе указанных критериев, используя ngSwitch. Что я делаю неправильно? Иногда он возвращает все 5 буквенных оценок, когда я переоцениваю sh страницу.

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

Это мой 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;
  }
}

Ответы [ 2 ]

2 голосов
/ 10 марта 2020

Похоже, ваш ngswitch находит условие, когда одно или несколько утверждений верны. Пример: x = 90 делает так, чтобы все соответствовали условию. В соответствии с их документацией "Каждое сопоставляемое представление отображается." ... попробуйте добавить дополнительную проверку к каждому выражению, чтобы проверить значение low и high, чтобы сделать только одно значение true. Как x> 59 && x <= 69 </p>

0 голосов
/ 10 марта 2020

У ваших корпусов коммутаторов должны быть верхние границы: 

<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, а затем все возможные значения в качестве падежей.

...