Angular - trouble with fetching from array

Question

so in my angular project, I've been instructed to make selectedEmployee: EmpInfo type and set the [value] of the select to emp and then use selectedEmployee as the object that I reference to display the data. I'm really new to Angular and not quite sure how to implement that. I thought that I did it right but in the browser, I'm getting an error that says "cannot read property 'EmpKey' of undefined in tracker.component.ts. I'm really stuck, any help is greatly appreciated. Thanks!

Here's my 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();
    ptoData: PTOData[];
    isHidden: boolean = false;
    
    selectedEmployee: EmpInfo;

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

my tracker.component.html


  
    
    
    
      
        
      
      
        
      
    
    
      
              
                
        
          
            Date
            Full/Half
            Hours
            Scheduled?
            Notes
            In P/R?
          
        
        
          
            
              Requests:
            
          
        
        
          
            {{pto.date | date: 'MM/dd/y'}}
                {{pto.fullhalf}}
                {{pto.hours}}
                {{pto.scheduled}}
                {{pto.notes}}
                {{pto.inPR}}

my 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: EmpInfo;

    timeVar = " hours";
    checkboxValue = false;

    constructor(private empInfoService: EmpInfoService) { }

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

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

    changeTime(): void {
        if (!this.checkboxValue)
        {
            this.timeVar = " hours"

            this.selectedEmployee.STDLTD = this.selectedEmployee.STDLTD * 8;
            this.selectedEmployee.Uncharged = this.selectedEmployee.Uncharged * 8;

            this.selectedEmployee.PTOBase = this.selectedEmployee.PTOBase * 8;
            this.selectedEmployee.PTOCarry = this.selectedEmployee.PTOCarry * 8;
            this.selectedEmployee.PTOBorrowed = this.selectedEmployee.PTOBorrowed * 8;
            this.selectedEmployee.PTOBalance = this.selectedEmployee.PTOBalance * 8;
            this.selectedEmployee.PTORequests = this.selectedEmployee.PTORequests * 8;
            this.selectedEmployee.PTORemaining = this.selectedEmployee.PTORemaining * 8;

            this.selectedEmployee.ETOEarned = this.selectedEmployee.ETOEarned * 8;
            this.selectedEmployee.ETORequests = this.selectedEmployee.ETORequests * 8;
            this.selectedEmployee.ETORemaining = this.selectedEmployee.ETORemaining * 8;
        }
        else
        {
            this.timeVar = " days"

            this.selectedEmployee.STDLTD = this.selectedEmployee.STDLTD / 8;
            this.selectedEmployee.Uncharged = this.selectedEmployee.Uncharged / 8;

            this.selectedEmployee.PTOBase = this.selectedEmployee.PTOBase / 8;
            this.selectedEmployee.PTOCarry = this.selectedEmployee.PTOCarry / 8;
            this.selectedEmployee.PTOBorrowed = this.selectedEmployee.PTOBorrowed / 8;
            this.selectedEmployee.PTOBalance = this.selectedEmployee.PTOBalance / 8;
            this.selectedEmployee.PTORequests = this.selectedEmployee.PTORequests / 8;
            this.selectedEmployee.PTORemaining = this.selectedEmployee.PTORemaining / 8;

            this.selectedEmployee.ETOEarned = this.selectedEmployee.ETOEarned / 8;
            this.selectedEmployee.ETORequests = this.selectedEmployee.ETORequests / 8;
            this.selectedEmployee.ETORemaining = this.selectedEmployee.ETORemaining / 8;
        }
    }
}

and my summary.component.html


  
    {{selectedEmployee.LastName | uppercase}} Summary
    
      
        
        
          
          
        
      
    
    
  
  
    
      
        
          
             Status 
            
              
            
          
        
        
          
             Anniversary 
            
              
                
                years
              
            
          
         
        
          
             Start Date 
            
              
            
          
        
        
          
             Adjusted Start 
            
              
            
          
        
        
          
             STD/LTD 
            
              
                
                {{timeVar}}
              
            
          
        
        
          
             Uncharged 
            
              
                
                {{timeVar}}
              
            
          
        
      


      

        PTO
        


        
          
            
             Base 
            
              
                
                {{timeVar}}
              
            
            
            
          
        
        
          
             + 
             Carryover 
            
              
                
                {{timeVar}}
              
            
          
        
        
          
            
             Balance 
            
              
                
                {{timeVar}}
              
            
            
          
        
        
          
             ― 
             Borrowed 
            
              
                
                {{timeVar}}
              
            
          
          
        
        
          
             ― 
             Requests 
            
              
                
                {{timeVar}}
              
            
            
          
          
        
        
          
             = 
             Balance 
            
              
                
                {{timeVar}}
              
            
          
        
        
          
             = 
             Available 
            
              
                
                {{timeVar}}
              
            
            
          
        
      


      

        ETO
        


          
            
              
               Earned 
              
                
                  
                  {{timeVar}}
                
              
            
            
               ― 
               Requests 
              
              
                
                {{timeVar}}
              
              
            
            
            
               = 
               Available 
              
                
                  
                  {{timeVar}}

Teddy Sterne · Accepted Answer

At line 7 of tracker.component.html you need to use two-way data binding to keep the value in sync with the model like so:

[(ngModel)]="selectedEmployee"

Because the value is not set initially you need to use the elvis operator to access properties on the object. This will short-circuit if any part on the object chain is undefined. Like so:

To pass the selected employee to the summary component you need to setup an input parameter like so:

export class SummaryComponent implements OnInit{

    @Input() selectedEmployee: EmpInfo;
}

And then provide that to the component in the tracker-component.html like so:

Angular - trouble with fetching from array

Answers (1)

Related Questions