Angular 4 - 如何让我的复选框更改变量的值？

我对Angular 4很新，我想将变量的值从“小时”更改为“天”，并将ngModel给出的值除以8。我该怎么做？Angular 4 - 如何让我的复选框更改变量的值？

下面是从我summary.component.html的摘录：

<div class="onoffswitch"> 
 
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked> 
 
    <label class="onoffswitch-label" for="myonoffswitch"> 
 
    <span class="onoffswitch-inner"></span> 
 
    <span class="onoffswitch-switch"></span> 
 
    </label> 
 
</div> 
 

 
<div class="panel-body"> 
 
    <form class="form-horizontal" role="form" style="overflow-x:auto;"> 
 
     <fieldset> 
 
     <div class="col-xs-6"> 
 
      <div class="form-group" *ngIf="empInfo && empInfo.length > selectedIndex"> 
 
      <label class="col-xs-2" style="font-weight: bold;"> &#43; </label> 
 
      <label class="col-xs-4"> Carryover </label> 
 
      <div class="col-xs-6"> 
 
       <input class='form-control' type="text" id="ptoCarry" [(ngModel)]="empInfo[selectedIndex].PTOCarry + timeVar" name="ptoCarry"/> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </fieldset> 
 
    </form> 
 
</div>

，然后这里是我的summary.component.ts：

import { Component, OnInit } from '@angular/core'; 
 
import { RouterModule, Routes } from '@angular/router'; 
 
import { EmpInfoService } from './emp-info.service'; 
 

 
import { EmpInfo } from './emp-info'; 
 

 
@Component({ 
 
    selector: 'pto-summary', 
 
    templateUrl: `./summary.component.html`, 
 
    styleUrls: ['./summary.component.css'] 
 
}) 
 

 
export class SummaryComponent implements OnInit{ 
 
    empInfo: EmpInfo[]; 
 
    selectedIndex = 4; 
 
    timeVar = " hours"; 
 

 
    constructor(private empInfoService: EmpInfoService) { } 
 

 
    getEmpInfo(): void { 
 
     this.empInfoService.getEmpInfos().then(
 
      empInfo => this.empInfo = empInfo 
 
     ); 
 
    } 
 

 
    ngOnInit(): void { 
 
     this.getEmpInfo(); 
 
    } 
 
}

这里是我的empInfo对象：

export class EmpInfo { 
 
    EmpKey: number; 
 
    EmpID: string; 
 
    Firstname: string; 
 
    LastName: string; 
 
    EmpStat: string; 
 
    StartDate: Date; 
 
    AdjustedStart: Date; 
 
    Anniversary: number; 
 
    PTOYear: number; 
 
    STDLTD: number; 
 
    Uncharged: number; 
 
    ETOEarned: number; 
 
    ETORequests: number; 
 
    ETORemaining: number; 
 
    PTOBase: number; 
 
    PTOCarry: number; 
 
    PTOBorrowed: number; 
 
    PTOBalance: number; 
 
    PTORequests: number; 
 
    PTORemaining: number; 
 
}

任何帮助是极大的赞赏和欢迎！提前致谢！

来源

2017-06-01 asdf

ngModel应该有'empInfo [selectedIndex] [PTOCarry + timeVar]'，你能分享你'empInfo'对象吗？ –

我会如何将它重写为2D数组？并更新原始文章。 – asdf

您的复选框就绑定到(change)事件，并使其调用一个函数，该函数内可以改变的“timeVar”的值，并通过8

将您的其他变量你也应该引入一个新的变量到您的summary.component.ts以跟踪复选框的状态。

在你的.html：

<input [(ngModel)]="checkboxValue" (change)="newFunction()" type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>

添加checkboxValue:boolean;和newFunction()您summary.component.ts

我完全不明白你想做的事，但你可以编写任何你想要的逻辑在相应的功能。这将是这样的。

export class SummaryComponent implements OnInit 
{ 
    empInfo: EmpInfo[]; 
    selectedIndex = 4; 
    timeVar = " hours"; 
    checkboxValue:boolean; 

    newFunction() 
    { 
     if(!checkboxValue) 
     { 
     this.timeVar = " days"; 

     this.empInfo[selectedIndex].PTOCarry = this.empInfo[selectedIndex].PTOCarry/8; 
     } 
     else 
     { 
     this.timeVar = " hours"; 
     //actually this else part shouldn't be needed 
     } 
    } 

    //the rest...

虽然要小心精度。如果你知道你的价值观不会引起问题，那并不重要。否则，只应在用户提交时进行乘法或除法运算，而不是在检查和取消选中复选框时进行。 ...做到这一点只需拿(change)="newFunction()"部分，并将其添加到文本输入，而不是复选框。

编辑：如果你将它移动到文字输入你应该改变（改变）事件的（提交）代替，就像这样：(submit)="newFunction()"。否则，表单将在每个字符输入上提交。

如果您需要更多帮助，请提供更多信息。我希望这可以工作。

来源

2017-06-01 16:17:49

Angular 4 - 如何让我的复选框更改变量的值？

回答

相关问题