Question

我想在选择下拉列表和单选按钮后显示值。我有一个由5,10,15,20,25组成的员工下拉。为此，我在component.ts中写道：

<tr _ngcontent-c1="" class="">
    <!--bindings={
       "ng-reflect-ng-if": "false"
    }-->
</tr>

并在component.html中将其称为

 employees = [{value: 5}, {value: 10}, {value: 15}, {value: 20}, {value: 25} ]

现在我有一个一个月的单选按钮。像这样

  <select>
    <option *ngFor='let a of employees'>{{a.value}} </option>
  </select>

现在我想要的是如果我将选择员工数量为5和radiobutton月份，它应显示值50，那么如果我将选择员工10和单选按钮年份的下拉列表，它应显示值为120.

 <input type="radio" value="month" (click)= "pclick()"> Month
 <input type="radio" value="year" (click)= "pclick()"> Year

有谁可以帮助我，我是angular2的新手。感谢。

Answer 1

在您的模板中

<select [(ngModel)]="employee">
   <option *ngFor='let a of employees' value=a.value>{{a.value}} </option>
</select>
<input type="radio" [(ngModel)]="monthly">
<input type="radio" [(ngModel)]="yearly">
<input type="radio" [(ngModel)]="quarterly">
<input type="button" value="Calculate" (click)="calculate()">

在您的组件中

import { Component } from '@angular/core';
@Component({
    selector: 'employee',
    templateUrl: './employee.component.html'
})

export class EmployeeComponent{
   private employee:number=0;
   private monthly:any;
   private yearly:any;
   private quarterly:any;
   private rupees:number = 10
   private amount:number = 0
   private pay:string= 'monthly';
   private employees = [{value: "5"}, {value: "10"}, {value: "15"}, {value: "25"}, {value: "75"} ] ; 

   calculateAmount() {
      if (this.yearly.checked) {
         this.amount = this.rupees * 12 * this.employee
      }else if (this.monthly.checked) {
          this.amount = this.rupees * 3 * this.employee
      } else {
          this.amount = this.rupees * this.employee
      }
    }
}

angular2的下拉值

1 个答案: