Угловой калькулятор

Question

Я пытаюсь создать приложение, в котором вы используете форму для ввода числовой оценки учащегося, и оно будет выводить буквенную оценку, исходя из требований к числовым значениям: 100-91 A, 90-81 B, 80-71 C, 70-61 D, <=60 F. Я знаю, что angular не использует предложение if-else, поэтому я просто не могу понять, как заставить приложение выложить что-то вроде: «У ученика __ оценка». когда кнопка отправки нажата. Есть идеи? Вот мой HTML:

<form novalidate #contactForm="ngForm" class="contact-form" 
  (ngSubmit)="onSubmit()">  
   <div class="container-form">

      <mat-form-field>
        <mat-select placeholder="Please select a student.">
          <mat-option *ngFor="let state of states" 
              [value]="state.value">
            {{ state.text }}
          </mat-option>
        </mat-select>
    </mat-form-field>

    <mat-form-field class="course-width" 
    hintLabel="Max 50 characters">
    <input matInput 
      placeholder="Please enter the course name." 
      type="text" 
        [(ngModel)]="contact.course" 
        name="cs" 
        #cs="ngModel"
        required
        maxlength="50"
        >
        <mat-hint align="end"> 
          {{cs.value?.length || 10}}/50
        </mat-hint>
        <mat-error>
          <div *ngIf="cs.touched && !cs.valid">
            <div *ngIf="cs.errors.required"> 
              Course is required
            </div>
          </div>
        </mat-error>
  </mat-form-field> 

  <mat-form-field class="score-width">
   <input matInput 
    placeholder="Please enter their score." 
    type="text" 
      [(ngModel)]="contact.score" 
      name="sc" 
      #sc="ngModel"
      required
      >
      <mat-error>
        <div *ngIf="sc.touched && !sc.valid">
          <div *ngIf="sc.errors.required"> 
            Score is required
          </div>
        </div>
      </mat-error>
</mat-form-field> 
    </div>

   <button mat-button type="reset">Clear</button>
   <button type="submit" mat-button
      [disabled]="contactForm.form.invalid"
       class="background-primary text-floral-white"          
      >
      Click the button to calculate your student's grade.
  </button>
</form>



<div>
  &nbsp;
</div>

Answer 1

В вашем component.ts у вас должна быть следующая функция onSubmit(), внутри этой функции вам нужно создать правила и присвоить значение для отображения

component.ts

   //global variable
   scoreVarToShow = 'F';

   onSubmit(){
     if(contact.score >= 91){
        this.scoreVarToShow = 'A';
     }else if(contact.score >= 81){
        this.scoreVarToShow = 'B';
     }else if(contact.score >= 71){
        this.scoreVarToShow = 'C';
     }else if(contact.score >= 61){
        this.scoreVarToShow = 'D';
     }else{
      this.scoreVarToShow = 'F';
     }

   }

component.html

<div>
  Score: {{scoreVarToShow}}
</div>