Question

我对Angular 4很陌生，我想从＆＃34;小时＆＃34;更改变量的值。到＆＃34;天＆＃34;并且还将我的ngModel给出的值除以8.我究竟要怎么做呢？

这是摘自我的summary.component.html：

＆＃13;

<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>

＆＃13;

然后在这里发表我的summary.component.ts：

＆＃13;

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();
    }
}

＆＃13;

这是我的empInfo对象：

＆＃13;

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;
}

＆＃13;

非常感谢和欢迎任何帮助！提前谢谢！

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()"。否则表格将在每个字符输入上提交。

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

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

1 个答案: