Question

我对Angular很新，并且无法使用按钮递增和递减变量。我环顾四周，尝试了我发现的东西，似乎没有用。我正在尝试使用Next和Previous按钮，从我的selectedEmployee变量中添加1或减1，并动态地将输出的内容更改为屏幕。

编辑只要我没有从组合框中选择一些内容，Next函数就会工作，它只是在初始化的0中加1，但如果我从组合框中选择了某些内容则不起作用。但是，Previous函数始终有效。为什么会出现这种差异？此外，在我使用上一个函数后，下一个函数可以正常工作，但在从组合框中选择一个项目后，它只是在初始时间不起作用。

这是我的tracker.component.ts：

import { Component, OnInit, Input } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { EmpInfoService } from './emp-info.service';
import { EmpInfo } from './emp-info'; 

@Component({
    selector: 'pto-tracker',
    templateUrl: `./tracker.component.html`,
    styleUrls: ['./tracker.component.css']
})

export class TrackerComponent implements OnInit{
    empInfo: EmpInfo[];
    isHidden: boolean = false;
    public selectedEmployee: number = 0;

    constructor(private empInfoService: EmpInfoService) { }

    getEmpInfo(): void {
        this.empInfoService.getEmpInfos().then(
            empInfo => this.empInfo = empInfo
        );
    }

    ngOnInit(): void {
        this.getEmpInfo();
    }

    toggleSummary(): void {
        this.isHidden = !this.isHidden;
    }

    nextEmployee(): void {
        this.selectedEmployee = this.selectedEmployee + 1;
    }

    previousEmployee(): void {
        this.selectedEmployee = this.selectedEmployee - 1;
    }
}

这是我的tracker.component.html：

<div class="row">
  <div [ngClass]="{'col-xs-12':isHidden === true, 'col-xs-7': isHidden !== false}" style="background-color:red;">
    <button class="form-control" style="width:150px;" (click)="toggleSummary()">Open Summary</button>
    <select id="empName" [(ngModel)]="selectedEmployee">
      <option selected="selected" disabled>Employee Name...</option>
      <option *ngFor="let emp of empInfo; let i = index" [value]="i">{{i}} - {{emp.EmpID}}</option>
    </select>
    <select id="PTOtype">
      <option selected="selected" disabled>Type of PTO...</option>
      <option value="PTO">PTO</option>
      <option value="ETO-Earned">ETO - Earned</option>
      <option value="ETO-Used">ETO - Used</option>
      <option value="STDLTD">STD/LTD</option>
      <option value="Uncharged">Uncharged</option>
    </select>
    <h2 *ngIf="empInfo && empInfo.length > selectedEmployee">{{empInfo[selectedEmployee].FirstName}}</h2>
    <button class="form-control" style="width: 150px;" (click)="nextEmployee()">Next</button>
    <button class="form-control" style="width: 150px;" (click)="previousEmployee()">Previous</button>
  </div>
  <div *ngIf="isHidden" class="col-xs-5">
        <pto-summary [selectedEmployee]="selectedEmployee"></pto-summary>
  </div>
</div>

非常感谢任何帮助。提前谢谢！

Answer 1

将selectedEmployee设为0

public selectedEmployee: number = 0;

Answer 2

我认为您的选择绑定存在问题，您可以在选择中使用[ngValue]代替[value]。

<select id="empName" [(ngModel)]="selectedEmployee">
   <option selected="selected" disabled>Employee Name...</option>
   <option *ngFor="let emp of empInfo; let i = index" [ngValue]="i">{{i}} - {{emp.EmpID}}</option>
</select>

我在这种情况下将是字符串，因此计算它将是错误。

阅读此主题以获取更多信息：

Binding select element to object in Angular 2

Angular - Button不递增变量

2 个答案: