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 - 如何讓我的複選框更改變量的值？

回答

相關問題