角4类型错误：无法读取属性“IndustrySegments”的未定义

我是相当新的角4和我有这个错误在Chrome来了一个问题：角4类型错误：无法读取属性“IndustrySegments”的未定义

错误类型错误：无法读取属性“IndustrySegments”在Object.eval不确定 [如updateDirectives（IndustrialComponent.html：15）在Object.debugUpdateDirectives [如updateDirectives（

我试图填充一个下拉列表下拉填充它，虽然它确实有。在顶部的一个空白条目，我不想要，我想知道这是否是由于我得到的错误。

这里是我的组件的HTML代码：

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

下拉的内容是从JSON文件来叫工业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" ] 
}

这里是我的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 ]); 
    } 
}

有没有人知道我在做什么错在这里？我很欣赏任何建议。

来源

2017-08-29 Andre

试试用这个？运营商：

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

industrialDropdown不存在时，模板被渲染

来源

2017-08-29 19:16:35 Thibs

谢谢！这摆脱了错误。 – Andre

角4类型错误：无法读取属性“IndustrySegments”的未定义

回答

相关问题