Angular - 无法读取属性'..'未定义
在我的Angular项目中,我收到一个错误,说“无法读取属性'...'未定义的”,其中'...'是索引无论从组合框中选择哪一个员工。Angular - 无法读取属性'..'未定义
我的项目的一点背景。我让用户从组合框(tracker.component)中选择一个员工。然后,该雇员的索引被采用并用于显示该雇员的信息(summary.component)。它的效果很好,并且有下一个,上一个,第一个,最后一个按钮,但是每当我打开摘要面板(summary.component)时,就会得到上面在浏览器中提到的错误。我在哪里搞乱?
这里是我的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[] = new Array<EmpInfo>();
ptoData: PTOData[];
isHidden: boolean = false;
selectedEmployee: number = 0;
public selectedType: string = "PTO";
constructor(
private empInfoService: EmpInfoService,
private ptoDataService: PTODataService) { }
getEmpInfo(): void {
this.empInfoService.getEmpInfos().then(
empInfo => {
this.empInfo = empInfo.sort((a, b) => a.LastName < b.LastName ? -1 : b.LastName < a.LastName ? 1 : 0);
});
}
getPTOData(): void {
this.ptoDataService.getPTODatas().then(
ptoData => this.ptoData = ptoData
);
}
ngOnInit(): void {
this.getEmpInfo();
this.getPTOData();
}
toggleSummary(): void {
this.isHidden = !this.isHidden;
}
isNextValid() {
if (this.selectedEmployee > 0) {
return true;
}
else {
return false;
}
}
isPreviousValid() {
if (this.selectedEmployee < this.empInfo.length - 1) {
return true;
}
else {
return false;
}
}
nextEmployee(): void {
this.selectedEmployee = this.selectedEmployee + 1;
}
previousEmployee(): void {
this.selectedEmployee = this.selectedEmployee - 1;
}
firstEmployee(): void {
this.selectedEmployee = 0;
}
lastEmployee(): void {
this.selectedEmployee = this.empInfo.length - 1;
}
}
我tracker.component.html
<div class="row">
<div [ngClass]="{'col-xs-12':isHidden === true, 'col-xs-7': isHidden !== false}">
<button class="btn btn-default btn-primary" style="width:50px; height: 50px; float:right; padding-bottom: 10px; padding-top: 10px;margin:5px;" (click)="toggleSummary()"><i class="fa fa-pencil-square-o fa-2x" aria-hidden="true"></i></button>
<div class="col-xs-12 no-pad" style="padding-bottom:50px;">
<div class="col-xs-3">
<select class="form-control" 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}} - {{emp.FirstName}} {{emp.LastName}}</option>
</select>
</div>
<div class="col-xs-2">
<select class="form-control" id="PTOtype" [(ngModel)]="selectedType">
<option selected="selected" value="PTO">PTO</option>
<option value="etoEarned">ETO - Earned</option>
<option value="etoUsed">ETO - Used</option>
<option value="STDLTD">STD/LTD</option>
<option value="Uncharged">Uncharged</option>
</select>
</div>
</div>
<div class="col-xs-12">
<table class="table table-striped table-bordered">
<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>
<tfoot *ngIf="empInfo && empInfo.length > selectedEmployee">
<tr>
<td colspan="6">
<span class="requestText">Requests:</span>
<button class="btn btn-default btn-primary btn-bargin" style="float: right;" (click)="lastEmployee()"><i class="fa fa-step-forward fa-lrg" aria-hidden="true"></i></button>
<button [disabled]="!isPreviousValid()" class="btn btn-default btn-primary btn-margin" style="float:right;" (click)="nextEmployee()"><i class="fa fa-play fa-lrg" aria-hidden="true"></i></button>
<div class="footertext">{{selectedEmployee+1}} of {{empInfo.length}}</div>
<button [disabled]="!isNextValid()" class="btn btn-default btn-primary btn-margin" style="float: right;" (click)="previousEmployee()"><i class="fa fa-play fa-flip-horizontal fa-lrg" aria-hidden="true"></i></button>
<button class="btn btn-default btn-primary btn-margin" style="float: right;" (click)="firstEmployee()"><i class="fa fa-step-backward fa-lrg" aria-hidden="true"></i></button>
</td>
</tr>
</tfoot>
<tbody>
<tr *ngFor="let pto of ptoData">
<ng-container *ngIf="pto.type === selectedType">
<ng-container *ngIf="pto.EmpKey === empInfo[selectedEmployee].EmpKey">
<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>
</ng-container>
</ng-container>
</tr>
</tbody>
</table>
</div>
</div>
<div *ngIf="isHidden" class="col-xs-5">
<pto-summary [selectedEmployee]="selectedEmployee"></pto-summary>
</div>
</div>
我summary.component.ts
import { Component, OnInit, Input } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { EmpInfoService } from './emp-info.service';
import { TrackerComponent } from './tracker.component';
import { EmpInfo } from './emp-info';
@Component({
selector: 'pto-summary',
templateUrl: `./summary.component.html`,
styleUrls: ['./summary.component.css']
})
export class SummaryComponent implements OnInit{
empInfo: EmpInfo[];
@Input() selectedEmployee: number;
timeVar = " hours";
checkboxValue = false;
constructor(private empInfoService: EmpInfoService) { }
getEmpInfo(): void {
this.empInfoService.getEmpInfos().then(
empInfo => {
this.empInfo = empInfo.sort((a, b) => a.LastName < b.LastName ? -1 : b.LastName < a.LastName ? 1 : 0);
});
}
ngOnInit(): void {
this.getEmpInfo();
}
changeTime(): void {
if (!this.checkboxValue)
{
this.timeVar = " hours"
this.empInfo[this.selectedEmployee].STDLTD = this.empInfo[this.selectedEmployee].STDLTD * 8;
this.empInfo[this.selectedEmployee].Uncharged = this.empInfo[this.selectedEmployee].Uncharged * 8;
this.empInfo[this.selectedEmployee].PTOBase = this.empInfo[this.selectedEmployee].PTOBase * 8;
this.empInfo[this.selectedEmployee].PTOCarry = this.empInfo[this.selectedEmployee].PTOCarry * 8;
this.empInfo[this.selectedEmployee].PTOBorrowed = this.empInfo[this.selectedEmployee].PTOBorrowed * 8;
this.empInfo[this.selectedEmployee].PTOBalance = this.empInfo[this.selectedEmployee].PTOBalance * 8;
this.empInfo[this.selectedEmployee].PTORequests = this.empInfo[this.selectedEmployee].PTORequests * 8;
this.empInfo[this.selectedEmployee].PTORemaining = this.empInfo[this.selectedEmployee].PTORemaining * 8;
this.empInfo[this.selectedEmployee].ETOEarned = this.empInfo[this.selectedEmployee].ETOEarned * 8;
this.empInfo[this.selectedEmployee].ETORequests = this.empInfo[this.selectedEmployee].ETORequests * 8;
this.empInfo[this.selectedEmployee].ETORemaining = this.empInfo[this.selectedEmployee].ETORemaining * 8;
}
else
{
this.timeVar = " days"
this.empInfo[this.selectedEmployee].STDLTD = this.empInfo[this.selectedEmployee].STDLTD/8;
this.empInfo[this.selectedEmployee].Uncharged = this.empInfo[this.selectedEmployee].Uncharged/8;
this.empInfo[this.selectedEmployee].PTOBase = this.empInfo[this.selectedEmployee].PTOBase/8;
this.empInfo[this.selectedEmployee].PTOCarry = this.empInfo[this.selectedEmployee].PTOCarry/8;
this.empInfo[this.selectedEmployee].PTOBorrowed = this.empInfo[this.selectedEmployee].PTOBorrowed/8;
this.empInfo[this.selectedEmployee].PTOBalance = this.empInfo[this.selectedEmployee].PTOBalance/8;
this.empInfo[this.selectedEmployee].PTORequests = this.empInfo[this.selectedEmployee].PTORequests/8;
this.empInfo[this.selectedEmployee].PTORemaining = this.empInfo[this.selectedEmployee].PTORemaining/8;
this.empInfo[this.selectedEmployee].ETOEarned = this.empInfo[this.selectedEmployee].ETOEarned/8;
this.empInfo[this.selectedEmployee].ETORequests = this.empInfo[this.selectedEmployee].ETORequests/8;
this.empInfo[this.selectedEmployee].ETORemaining = this.empInfo[this.selectedEmployee].ETORemaining/8;
}
}
}
和我summary.component.html
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title pull-left">{{empInfo[selectedEmployee].LastName | uppercase}} Summary</h3>
<div style="float: right;">
<div class="onoffswitch">
<input [(ngModel)]="checkboxValue" (change)="changeTime()" type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="panel-body">
<form class="form-horizontal" role="form" style="overflow-x:auto;">
<fieldset>
<div class="col-xs-6">
<div class="form-group" *ngIf="empInfo && empInfo.length > selectedEmployee">
<label class="col-xs-5"> Status </label>
<div class="col-xs-7">
<select class="form-control" id="empStatus" [(ngModel)]="empInfo[selectedEmployee].EmpStat" name="empStatus">
<option value="Current">Current</option>
<option value="Terminated">Terminated</option>
</select>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group" *ngIf="empInfo && empInfo.length > selectedEmployee">
<label class="col-xs-5"> Anniversary </label>
<div class="col-xs-7">
<div class="input-group">
<input class='form-control' type="text" id="empAnniversary" [(ngModel)]="empInfo[selectedEmployee].Anniversary" name="empAnniversary" />
<span class="input-group-addon">years</span>
</div>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group" *ngIf="empInfo && empInfo.length > selectedEmployee">
<label class="col-xs-5"> Start Date </label>
<div class="col-xs-7">
<input class='form-control' type="text" id="empStartDate" [ngModel]="empInfo[selectedEmployee].StartDate | date: 'MM/dd/y'" name="empStartDate"/>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group" *ngIf="empInfo && empInfo.length > selectedEmployee">
<label class="col-xs-5"> Adjusted Start </label>
<div class="col-xs-7">
<input class='form-control' type="text" id="empAdjustedStart" [ngModel]="empInfo[selectedEmployee].AdjustedStart | date: 'MM/dd/y'" name="empAdjustedStart"/>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group" *ngIf="empInfo && empInfo.length > selectedEmployee">
<label class="col-xs-5"> STD/LTD </label>
<div class="col-xs-7">
<div class="input-group">
<input class='form-control' type="text" id="empSTDLTD" [(ngModel)]="empInfo[selectedEmployee].STDLTD" name="empSTDLTD" />
<span class="input-group-addon">{{timeVar}}</span>
</div>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group" *ngIf="empInfo && empInfo.length > selectedEmployee">
<label class="col-xs-5"> Uncharged </label>
<div class="col-xs-7">
<div class="input-group">
<input class='form-control' type="text" id="empUncharged" [(ngModel)]="empInfo[selectedEmployee].Uncharged" name="empUncharged" />
<span class="input-group-addon">{{timeVar}}</span>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset>
<h4>PTO</h4>
<br />
<div class="col-xs-12">
<div class="form-group" *ngIf="empInfo && empInfo.length > selectedEmployee">
<div class="col-xs-1"></div>
<label class="col-xs-2"> Base </label>
<div class="col-xs-3">
<div class="input-group">
<input class='form-control' type="text" id="ptoBase" [(ngModel)]="empInfo[selectedEmployee].PTOBase" name="ptoBase" />
<span class="input-group-addon">{{timeVar}}</span>
</div>
</div>
<div class="col-xs-6">
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group" *ngIf="empInfo && empInfo.length > selectedEmployee">
<label class="col-xs-2" style="font-weight: bold;"> + </label>
<label class="col-xs-4"> Carryover </label>
<div class="col-xs-6">
<div class="input-group">
<input class='form-control' type="text" id="ptoCarry" [(ngModel)]="empInfo[selectedEmployee].PTOCarry" name="ptoCarry" />
<span class="input-group-addon">{{timeVar}}</span>
</div>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group" *ngIf="empInfo && empInfo.length > selectedEmployee">
<div class="col-xs-1"></div>
<label class="col-xs-4"> Balance </label>
<div class="col-xs-6">
<div class="input-group">
<input class='form-control' type="text" id="ptoBalance" [(ngModel)]="empInfo[selectedEmployee].PTOBalance" name="ptoBalance" />
<span class="input-group-addon">{{timeVar}}</span>
</div>
</div>
<div class="col-xs-1"></div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group" *ngIf="empInfo && empInfo.length > selectedEmployee">
<label class="col-xs-2" style="font-weight: bold;"> ― </label>
<label class="col-xs-4"> Borrowed </label>
<div class="col-xs-6">
<div class="input-group">
<input class='form-control' type="text" id="ptoBorrowed" [(ngModel)]="empInfo[selectedEmployee].PTOBorrowed" name="ptoBorrowed" />
<span class="input-group-addon">{{timeVar}}</span>
</div>
</div>
</div>
<hr style="border: solid 1px black;border-bottom:1px solid black;clear:both" />
</div>
<div class="col-xs-6">
<div class="form-group" *ngIf="empInfo && empInfo.length > selectedEmployee">
<label class="col-xs-1" style="font-weight: bold;"> ― </label>
<label class="col-xs-4"> Requests </label>
<div class="col-xs-6">
<div class="input-group">
<input class='form-control' type="text" id="ptoRequests" [(ngModel)]="empInfo[selectedEmployee].PTORequests" name="ptoRequests" />
<span class="input-group-addon">{{timeVar}}</span>
</div>
</div>
<div class="col-xs-1"></div>
</div>
<hr style="border: solid 1px black;border-bottom:1px solid black;clear:both" />
</div>
<div class="col-xs-6">
<div class="form-group" *ngIf="empInfo && empInfo.length > selectedEmployee">
<label class="col-xs-2" style="font-weight: bold;"> = </label>
<label class="col-xs-4"> Balance </label>
<div class="col-xs-6">
<div class="input-group">
<input class='form-control' type="text" id="ptoBalance" [(ngModel)]="empInfo[selectedEmployee].PTOBalance" name="ptoBalance" />
<span class="input-group-addon">{{timeVar}}</span>
</div>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group" *ngIf="empInfo && empInfo.length > selectedEmployee">
<label class="col-xs-1" style="font-weight: bold;"> = </label>
<label class="col-xs-4"> Available </label>
<div class="col-xs-6">
<div class="input-group">
<input class='form-control' type="text" id="ptoRemaining" [(ngModel)]="empInfo[selectedEmployee].PTORemaining" name="ptoRemaining" />
<span class="input-group-addon">{{timeVar}}</span>
</div>
</div>
<div class="col-xs-1"></div>
</div>
</div>
</fieldset>
<fieldset>
<h4>ETO</h4>
<br />
<div class="col-xs-6">
<div class="form-group" *ngIf="empInfo && empInfo.length > selectedEmployee">
<div class="col-xs-2"></div>
<label class="col-xs-4"> Earned </label>
<div class="col-xs-6">
<div class="input-group">
<input class='form-control' type="text" id="etoEarned" [(ngModel)]="empInfo[selectedEmployee].ETOEarned" name="etoEarned" />
<span class="input-group-addon">{{timeVar}}</span>
</div>
</div>
</div>
<div class="form-group" *ngIf="empInfo && empInfo.length > selectedEmployee">
<label class="col-xs-2"> ― </label>
<label class="col-xs-4"> Requests </label>
<div class="col-xs-6">
<div class="input-group">
<input class='form-control' type="text" id="etoRequests" [(ngModel)]="empInfo[selectedEmployee].ETORequests" name="etoRequests" />
<span class="input-group-addon">{{timeVar}}</span>
</div>
</div>
</div>
<hr style="border: solid 1px black;border-bottom:1px solid black;clear:both" />
<div class="form-group" *ngIf="empInfo && empInfo.length > selectedEmployee">
<label class="col-xs-2"> = </label>
<label class="col-xs-4"> Available </label>
<div class="col-xs-6">
<div class="input-group">
<input class='form-control' type="text" id="etoRemaining" [(ngModel)]="empInfo[selectedEmployee].ETORemaining" name="etoRemaining" />
<span class="input-group-addon">{{timeVar}}</span>
</div>
</div>
</div>
</div>
<div class="col-xs-6"></div>
</fieldset>
</form>
</div>
</div>
我认为基于消息,问题就在这里:{{empInfo[selectedEmployee].LastName | uppercase}}
如果你的服务使用Http,那么它是一个异步操作。这意味着您的网页正在尝试在之前显示数据可用。
有几种常见的方法可以解决这个问题,但最好的办法可能是在HTML中添加一个* ngIf来检查显示页面之前是否有数据。
喜欢的东西,你已经在这里做:
*ngIf="empInfo && empInfo.length
啊好吧,我刚刚错过了那一个。谢谢! – asdf
我基础上,问题是这里的消息假设:{{empInfo [selectedEmployee] .LastName |大写}}我不确定你可以使用数组索引的安全导航操作。 – DeborahK
@DeborahK是的,我检查,它说这是它有一个问题的线 – asdf