Angular - 在数组

Question

我试图让你的前一个按钮被禁用，只要你在数组的开头，并且每当你到达数组的末尾时我的下一个按钮被禁用。用户将从组合框中选择一个雇员，该雇员将获得所选雇员的索引到名为selectedEmployee的变量中。由于某种原因，我已经使用了上一个按钮而不是下一个按钮。

这是我的tracker.component.ts

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

import { PTODataService } from './pto-data.service';
import { PTOData } from './pto-data';
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[];
    ptoData: PTOData[];
    isHidden: boolean = false;

    public selectedEmployee: number = 0;
    public selectedType: string = "PTO";

    constructor(
        private empInfoService: EmpInfoService,
        private ptoDataService: PTODataService) { }

    getEmpInfo(): void {
        this.empInfoService.getEmpInfos().then(
            empInfo => this.empInfo = empInfo
            );
    }

    getPTOData(): void {
        this.ptoDataService.getPTODatas().then(
            ptoData => this.ptoData = ptoData
        );
    }

    ngOnInit(): void {
        this.getEmpInfo();
        this.getPTOData();
    }

    toggleSummary(): void {
        this.isHidden = !this.isHidden;
    }

    nextEmployee(): void {
        this.selectedEmployee = this.selectedEmployee+1;
    }

    previousEmployee(): void {
        this.selectedEmployee = this.selectedEmployee-1;
    }

    isPreviousValid() {
        if (this.selectedEmployee > 0) {
            return true;
        }   
        else {
            return false;
        }
    }

    isNextValid() {
        if (this.selectedEmployee < EmpInfo.length) {
            return true;
        }
        else {
            return false;
        }
    }
}

这里是我的html片段，我正在尝试实现它：

    <button [disabled]="isNextValid()"class="form-control" style="width: 150px;" (click)="nextEmployee()">Next</button>
    <button [disabled]="!isPreviousValid()" class="form-control" style="width: 150px;" (click)="previousEmployee()">Previous</button>

Answer 1

您必须使用变量名称 empInfo 而不是类名。请检查以下代码

isNextValid() {
    if (this.selectedEmployee < this.empInfo.length) {
        return true;
    }
    else {
        return false;
    }
}