Angular 4 TypeError：无法读取未定义的属性“IndustrySegments”答案

【问题标题】：Angular 4 TypeError: Cannot read property 'IndustrySegments' of undefinedAngular 4 TypeError：无法读取未定义的属性“IndustrySegments”
【发布时间】：2018-02-07 08:38:30
【问题描述】：

我对 Angular 4 还很陌生，并且在 Chrome 中出现这个错误时遇到了问题：

错误类型错误：无法读取未定义的属性“IndustrySegments” 在 Object.eval [as updateDirectives] (IndustrialComponent.html:15) 在 Object.debugUpdateDirectives [as updateDirectives] (

我正在尝试填充下拉列表。尽管它在顶部确实有一个我不想要的空白条目，但它确实填充了下拉列表。我想知道这是否是由于我遇到的错误。

这是我的组件 HTML 代码：

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

下拉列表的内容来自名为 Industrial-dropdown.json 的 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" ]
}

这是我的 Industrial.component.ts 代码：

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

有谁知道我在这里做错了什么？我很感激任何建议。

【问题讨论】：

标签： json angular typescript

【解决方案1】：

使用 ?运营商：

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

渲染模板时，industrialDropdown 不存在

【讨论】：