Angular 4 TypeError: Cannot read property 'IndustrySegments' of undefined

Question

I'm fairly new to Angular 4 and am having a problem with this error coming up in Chrome:

ERROR TypeError: Cannot read property 'IndustrySegments' of undefined at Object.eval [as updateDirectives] (IndustrialComponent.html:15) at Object.debugUpdateDirectives [as updateDirectives] (

I'm trying to populate a dropdown. The dropdown does populate though it does have a blank entry at the top that I don't want. I wonder if that is due to the error I'm getting.

Here's my component HTML code:

<select formControlName="drpIndustrySegments">
                    <option value="-">Industry Segment</option>
                    <option *ngFor="let industrySegment of industrialDropdown.IndustrySegments" value="{{ industrySegment }}">{{ industrySegment }}</option>
                </select>

The contents of the dropdown is coming from a JSON file called industrial-dropdown.json:

{
  "IndustrySegments": [ "Amusement and Theme Parks", "Construction Equipment", "Conveyor Equipment", "Hot Mix Asphalt", "Industrial & Commercial Facilities", "Locomotive & Rail Car", "Portable & Modular Buildings", "Portable and Modular Buildings", "Propane Gas", "Ready Mix Concrete", "Right of Way Equipment", "Short Line Rail Road", "Ski Resorts" ]
}

Here's my industrial.component.ts code:

import { Component, OnInit } from '@angular/core';
import { FormControl, FormArray, FormBuilder, FormGroup } from '@angular/forms';
import { Router, ActivatedRoute } from '@angular/router';

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/min';

import { IndustrialService } from '../../services/industrial.service';
import { IndustrialDropdown } from '../../shared/industrial-dropdown';

@Component({
    selector: 'industrial',
    templateUrl: './industrial.component.html'
})
export class IndustrialComponent implements OnInit {
    heroForm: FormGroup;
    industrialDropdown: IndustrialDropdown;
    constructor(
        private fb: FormBuilder,
        private industrialService: IndustrialService,
        private router: Router) {
        this.createForm();
    }
    ngOnInit() {
        this.getIndustrialDropdowns();
    }
    getIndustrialDropdowns(): void {
        this.industrialService.getIndustrialDropdown().then(industrialDropdown => this.industrialDropdown = industrialDropdown);
    }
    createForm() {
        this.heroForm = this.fb.group({
            drpIndustrySegments: '',
            drpItemsPainted: '',
            drpEnvironments: '',
            drpSurfaces: '',
            drpVOCs: ''
        });
    }
    onSubmit() {
        this.router.navigate(['/industrial-search', this.heroForm.value.drpIndustrySegments, this.heroForm.value.drpItemsPainted, this.heroForm.value.drpEnvironments, this.heroForm.value.drpSurfaces, this.heroForm.value.drpVOCs ]);
    }
}

Does anyone know what I'm doing wrong here? I appreciate any suggestions.

Thibs Thibs · Accepted Answer · 2017-08-29T19:16:35

try this using the ? operator:

<option *ngFor="let industrySegment of industrialDropdown?.IndustrySegments" value="{{ industrySegment }}">{{ industrySegment }}</option>

industrialDropdown is not present when template is rendered

Angular 4 TypeError: Cannot read property 'IndustrySegments' of undefined

1 Answers