Question

在我的角色计划中，我试图获得员工在公司工作的年数，并根据这些年份，给他们分配一定的休息时间。我创建了一个我认为应该可以工作的功能，但没有任何内容被打印到屏幕上，我不确定原因。

这是我.ts的相关部分

＆＃13;

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

＆＃13;

以及函数和值在我的html中的地方

＆＃13;

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

＆＃13;

Answer 1

您需要使用双向数据绑定。

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

据我所知{{}}仅适用于纯文本。

为什么我的变量没有打印到屏幕上？

1 个答案: