Kątowy 4 - Jak mogę uzyskać moje pole wyboru, aby zmienić wartość zmiennej?

Question

Jestem całkiem nowy w Angular 4 i chcę zmienić wartość mojej zmiennej z "godzin" na "dni", a także podzielić wartość, którą daje mój ngModel przez 8. Jak dokładnie miałbym to zrobić?

Oto fragment z mojego 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>

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

Oto mój empInfo obiektu:

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

Każda pomoc jest mile widziana i zadowoleniem! Z góry dziękuję!

Answer 1

Wystarczy powiązać swoje pole do zdarzenia (change) i uczynić go wywołać funkcję, a wewnątrz funkcji można zmienić wartość „timeVar” i podzielić przez inną zmienną 8.

Ponadto należy wprowadzić nowy Zmienna do pliku summary.component.ts, aby śledzić stan pola wyboru.

W swojej .html:

<input [(ngModel)]="checkboxValue" (change)="newFunction()" type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked> 

dodać checkboxValue:boolean; i newFunction() do summary.component.ts

nie dokładnie zrozumieć, co chcesz zrobić, ale można kodować jakiejkolwiek logiki chcesz w tej funkcji odpowiednio. To byłoby coś takiego.

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

należy jednak zachować ostrożność. Nie ma to wielkiego znaczenia, jeśli wiesz, że twoje wartości nie spowodują problemów. W przeciwnym razie powinieneś pomnożyć lub podzielić tylko wtedy, gdy użytkownik je przesyła, a nie podczas zaznaczania i odznaczania pola wyboru. ... aby to zrobić, po prostu weź część (change)="newFunction()" i dodaj ją do pola tekstowego zamiast pola wyboru.

edit: Jeśli będziesz przenieść go do wprowadzania tekstu należy zmienić (zmień) wydarzenie do (złożyć) zamiast, jak to: (submit)="newFunction()". W przeciwnym razie formularz zostanie przesłany przy każdym wprowadzeniu znaku.

Jeśli potrzebujesz dodatkowej pomocy, proszę podać więcej informacji. Mam nadzieję, że to zadziała.