角度 - 设置变量会导致错误吗？

Question

我今天一直在努力学习一个程序，并且遇到了一个我遇到错误的问题。我只是尝试获取变量selectedEmployee的数字，并在数组中使用它来查找该索引中的特定字段。我感觉好像我做得对，但无论何时我在浏览器中运行它，我都会收到一条错误消息：＆＃34; Uncaught（承诺）：TypeError：无法读取属性＆＃39; 0＆＃ 39;未定义＆＃34;

这是我的tracker.component.ts：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这是我的tracker.component.html（我认为你并不需要）：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

然后在这里我的阵列（我也怀疑你需要）：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

在此先感谢，您的回复对于Angular新手来说意味着很多！

Answer 1

好吧，看看你的代码：

empInfo: EmpInfo[]; 

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

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

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

Answer 2

您正在尝试在声明时指定值EmpKey。这导致了这个问题。在获得员工数据后尝试分配价值。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;