web-dev-qa-db-ja.com

Angular 4-変数の値を変更するチェックボックスを取得するにはどうすればよいですか？

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

どんな助けも大歓迎です！前もって感謝します！

angularcheckbox
10
rcarcia02

チェックボックスを_(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()"_のように、代わりに（変更）イベントを（送信）に変更する必要があります。それ以外の場合、フォームはすべての文字入力で送信します。

さらにヘルプが必要な場合は、詳細情報を提供してください。これがうまくいくことを願っています。

18
Mina Michael