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

Posted 2023-03-05

【中文标题】Angular 4 - 如何让我的复选框更改变量的值？

【英文标题】：Angular 4 - How can I get my checkbox to change the value of a variable?

【发布时间】：2017-11-02 19:00:58

【问题描述】：

我对 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;

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

【问题讨论】：

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

如何将其重写为二维数组？并更新原始帖子。

【参考方案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()"。否则表单将在每个字符输入时提交。

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

【讨论】：

嗨@Mina，感谢您的回答，但我遇到了奇怪的问题，因为我们在 ngModel 中的每个复选框都有相同的变量，当我单击一个复选框时，所有复选框都会自动选中，请您帮忙建议我出去？谢谢！

这称为2路绑定。你说所有的复选框都具有相同的 ngModel。这意味着当该 ngModel 发生任何更改时，它将反映在所有复选框上。您只需要为每个复选框创建一个具有不同名称的单独 ngModel。 @sajabhoj