角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」的未定義

回答

相關問題