时间戳

首页 > 解决方案 > 等级计算器角度

node.js - 等级计算器角度

问题描述

我正在尝试制作一个应用程序，您可以在其中使用表格输入学生的数字等级，它会根据数字要求输出字母等级：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>

标签： node.jsangular

解决方案

在您的component.ts中，您必须onSubmit()在此函数中具有以下函数，您需要创建规则并分配一个值以显示

组件.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';
     }

   }

组件.html

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

推荐阅读