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

Question

我对Angular 4很新,我想将变量的值从"hours"更改为"days",并将我的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()"零件添加到文本输入而不是复选框.

编辑:如果您将其移动到文本输入,您应该将(更改)事件更改为(提交),如下所示:(submit)="newFunction()".否则表格将在每个字符输入上提交.

如果您需要更多帮助,请提供更多信息.我希望这有效.