CODEWITHSUNDEEP
angular
rcarcia02
rcarcia02

Reputation: 977

Why is my variable not printing to the screen?

In my angular program, I'm trying to get the number of years that an employee has worked at a company and based on those years, assign them a certain number of hours off. I created a function that I believe should work, but nothing is getting printed to the screen and I'm not sure why.

Here's the relevant parts of my .ts

import { Component, OnInit, Input } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { EmpInfoService } from './emp-info.service';
import { TrackerComponent } from './tracker.component';
import { EmpInfo } from './emp-info'; 

@Component({
    selector: 'pto-summary',
    templateUrl: `./summary.component.html`,
    styleUrls: ['./summary.component.css']
})

export class SummaryComponent implements OnInit{

    empInfo: EmpInfo[];
    @Input() selectedEmployee: number;
    ptoBase: number = 0;
    
    constructor(private empInfoService: EmpInfoService) { }
    
    getEmpInfo(): void {
        this.empInfoService.getEmpInfos().then(
            empInfo => {
                this.empInfo = empInfo.sort((a, b) =>
                    a.LastName < b.LastName ? -1 : b.LastName < a.LastName ? 1 : 0);
            });
    }
    
    ngOnInit(): void {
        this.getEmpInfo();
    }
    
    getPtoBase() {
        if (this.empInfo[this.selectedEmployee].AdjustedStart != null) {
            var time = (new Date()).valueOf() - (new Date(this.empInfo[this.selectedEmployee].AdjustedStart)).valueOf();
            time = time / (1000 * 60 * 60 * 24 * 356);
            if (time < 1) {
                return this.ptoBase = 10;
            }
            else if (time >= 1 && time < 5) {
                return this.ptoBase = 15;
            }
            else if (time >= 5 && time < 10) {
                return this.ptoBase = 20;
            }
            else {
                return this.ptoBase = 25;
            }
        }
        else {
            time = this.empInfo[this.selectedEmployee].Anniversary;
            if (time < 1) {
                return this.ptoBase = 10;
            }
            else if (time >= 1 && time < 5) {
                return this.ptoBase = 15;
            }
            else if (time >= 5 && time < 10) {
                return this.ptoBase = 20;
            }
            else {
                return this.ptoBase = 25;
            }
        }
    }

and here's where the function and value are in my html

<form class="form-horizontal" role="form" style="overflow-x:auto;" onload="getPtoBase()">
  <fieldset>
    <h4>PTO</h4>

    <div class="col-xs-12">
      <div class="form-group" *ngIf="empInfo && empInfo.length > selectedEmployee">
        <div class="col-xs-1"></div>
          <label class="col-xs-2"> Base </label>
            <div class="col-xs-3">
              <div class="input-group">
                <input [disabled]="isDisabled" class='form-control' type="text" id="ptoBase" value="{{ptoBase}}" name="ptoBase" />
                <span class="input-group-addon">{{timeVar}}</span>
              </div>
            </div>
            <div class="col-xs-6">
            </div>
          </div>
        </div>
  </fieldset>

Upvotes: 1

Views: 365

Answers (1)

Maciej Treder
Maciej Treder

Reputation: 12350

You need to use two-way data binding.

<input [disabled]="isDisabled" class='form-control' type="text" id="ptoBase" [(value)]=ptoBase name="ptoBase" />

As far as I know {{}} works only for plain text.

Upvotes: 1

Related Questions