角度設定変数にエラーがありますか？

Question

私は今日、プログラムに熱心に取り組んできました。問題が発生してエラーが発生しました。私は、変数selectedEmployeeの数値を取得し、そのインデックスの特定のフィールドを見つけるために配列内で使用しようとしています。私はそれを正しくやっているかのように感じますが、ブラウザで実行するたびに、 "Uncaught（約束）：TypeError：未定義のプロパティ '0'を読み取れません"

ここにあります私tracker.component.ts：

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

：

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

、その後、ここでは（私もあなたが必要と疑う）私の配列です：事前に

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