Question

我试图创建一个应用程序，您可以使用表单输入学生的数字等级，并根据数量要求输出字母等级：100-91 A, 90-81 B, 80-71 C, 70-61 D, <=60 F。我知道角度没有使用if-else句子，所以我无法弄清楚如何让应用程序吐出类似的东西：＆＃34;学生有__等级。＆＃34;当提交按钮被击中时。有任何想法吗？这是我的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>

等级计算器角度

1 个答案: