Angular - 设置变量会导致错误？

Question

今天我一直在努力研究一个计划，并且遇到了一个我遇到错误的问题。我只是试图获取变量selectedEmployee的数字，并将其用于数组中以在该索引中查找特定的字段。我感觉好像我做得很对，但每当我运行它，在浏览器中，我得到一个错误，说：“未捕获（承诺）：TypeError：无法读取属性'0'未定义”

这里是我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 EmpKey: number = this.empInfo[this.selectedEmployee].EmpKey; 
 

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

这里是我的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" [ngValue]="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> 
 
    <button class="form-control" style="width: 150px;" (click)="nextEmployee()">Next</button> 
 
    <button class="form-control" style="width: 150px;" (click)="previousEmployee()">Previous</button> 
 
    <h2 *ngIf="empInfo && empInfo.length > selectedEmployee">{{empInfo[selectedEmployee].FirstName}} {{EmpKey}}</h2> 
 
    <table class="table"> 
 
     <thead> 
 
     <tr> 
 
      <th>Date</th> 
 
      <th>Full/Half</th> 
 
      <th>Hours</th> 
 
      <th>Scheduled?</th> 
 
      <th>Notes</th> 
 
      <th>In P/R?</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr *ngFor="let pto of ptoData"> 
 
      <td>{{pto.date | date: 'MM/dd/y'}}</td> 
 
      <td>{{pto.fullhalf}}</td> 
 
      <td>{{pto.hours}}</td> 
 
      <td>{{pto.scheduled}}</td> 
 
      <td>{{pto.notes}}</td> 
 
      <td>{{pto.inPR}}</td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
    <div *ngIf="isHidden" class="col-xs-5"> 
 
     <pto-summary [selectedEmployee]="selectedEmployee"></pto-summary> 
 
    </div> 
 
</div>

，然后这里是我的数组（这也是我怀疑你会需要）：

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

在预先感谢您的答复意味着从别人很多谁是新来角！

Answer 1

那么，就看看你的代码：

empInfo: EmpInfo[]; 

所以empInfo未初始化任何东西在这里。它是未定义的

public selectedEmployee: number = 0; 
public EmpKey: number = this.empInfo[this.selectedEmployee].EmpKey; 

但在这里，你正试图访问它的第一个元素。因此错误。

Answer 2

您正试图在声明时分配值EmpKey。导致问题。尝试在获取员工数据后分配值。

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 EmpKey: number; 
 

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

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

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