Angular 4 - 如何讓我的復選框更改變量的值？

Question

我是 Angular 4 的新手，我想將變量的值從“小時”更改為“天”，並將我的 ngModel 給出的值除以 8。我到底要怎么做？

這是我的 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; }

非常感謝和歡迎任何幫助！ 提前致謝！

Answer 1

只需將您的復選框綁定到一個(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()"部分添加到文本輸入而不是復選框中。

編輯：如果您將其移至文本輸入，則應將 (change) 事件改為 (submit) ，如下所示： (submit)="newFunction()" 。 否則表單將在每個字符輸入時提交。

如果您需要更多幫助，請提供更多信息。 我希望這有效。