未触摸时，Angular 7 选择下拉对象为空 [英] Angular 7 select dropdown object is empty when not touched

问题描述

在我的应用程序中，ngOnInit() 加载货币、类别和制造商.我为此使用了 Angular 7 反应形式.数据按预期加载，下拉列表填充了值和第一个选择并显示给用户的选项.所以，问题来了，在完成表单并点击提交(使用默认下拉值)后，我看到 category、currency 和 的空对象制造商.

ProductNewComponent.ts

import {Component, OnInit} from '@angular/core';从 '@angular/router' 导入 {Router}；从'../service/product.service'导入{ProductService}；从@angular/forms"导入 {FormControl、FormGroup、Validators}；从../../../app.constants"导入 {CATEGORY_API_URL, CURRENCY_API_URL, MANUFACTURER_API_URL, PRODUCT_API_URL, SERVER_URL};从'../model/product'导入{产品}；从 '../model/price' 导入 {Price}；从'../../category/service/category.service'导入{CategoryService}；从../../category/model/category"导入{类别}；从'../model/currency'导入{Currency}；从'../model/manufacturer'导入{制造商}；@成分({选择器:'app-product-new'，templateUrl: './product-new.component.html',styleUrls: ['./product-new.component.css']})导出类 ProductNewComponent 实现 OnInit{类别:数组<类别>；货币:数组<货币>；制造商:Array<制造商>；productForm = new FormGroup({id: new FormControl({value:'',disabled:true}, Validators.minLength(2)),名称:new FormControl(''),描述:new FormControl(''),价格:new FormControl(''),数量:new FormControl(''),类别控件:新表单控件('')，货币控制:新的表单控制('')，制造商控制:新的表单控制('')，});构造函数(私有产品服务:产品服务，私有类别服务:类别服务，私有路由器:路由器){}ngOnInit(){this.loadCategories();this.loadCurrencies();this.loadManufacturers();}创建产品(){const product=new Product();product.name=this.productForm.value.name;product.description=this.productForm.value.description;product.price=new Price(this.productForm.value.currencyControl, this.productForm.value.price);product.category=this.productForm.value.categoryControl;product.manufacturer=this.productForm.value.manufacturerControl;product.createdBy='管理员';product.createdDate='';product.lastModifiedBy='管理员';product.lastModifiedDate='管理员';const url=SERVER_URL+PRODUCT_API_URL+'创建';this.productService.createProduct(url,product).subscribe(值 =>{console.log('产品创建成功');},error1 =>{console.log('创建产品失败');},()=>{this.router.navigate(['/product/list']);});}私人 loadCategories(){const url=SERVER_URL+CATEGORY_API_URL+'list';this.categoryService.getCategories(url).subscribe(类别 =>{this.categories=categories;},错误 1 ​​=>{},()=>{});}私人 loadCurrencies(){const url=SERVER_URL+CURRENCY_API_URL+'list';this.productService.getCurrencies( url ).subscribe(货币 =>{this.currencies=货币；},错误 1 ​​=>{},() =>{});}私有负载制造商(){const url=SERVER_URL+MANUFACTURER_API_URL+'list';this.productService.getManufacturers( url ).subscribe(制造商 =>{this.manufacturers=制造商；},错误 1 ​​=>{},() =>{});}制造商数据可用():布尔值{返回 this.manufacturers!==undefined;}categoryDataAvailable(): 布尔值{返回 this.categories!==undefined;}货币数据可用():布尔值{返回 this.currencies!==undefined;}回去() {this.router.navigate(['/product']);}}

product.component.html

<h2>创建新产品</h2><br/><form [formGroup]="productForm"><div class="form-group"><label for="id">产品 ID</label><input type="text" class="form-control" id="id" formControlName="id"><small id="emailHelp" class="form-text text-muted">系统自动生成</small>
<div class="form-group"><label for="name">Name</label><input type="text" class="form-control" id="name" formControlName="name" required placeholder="输入产品名称">

<div class="form-group"><label for="description">Description</label><input type="text" width="200" height="100" class="form-control" id="description" formControlName="description" required placeholder="输入产品描述">

<div class="form-group"><label for="currencyControl">价格</label><br/><标签><select class="form-control" formControlName="currencyControl" name="currencyControl" id="currencyControl"><option *ngFor="让货币的货币">{{货币名称}}</选项></选择><input formControlName="amount" id="amount" placeholder="Enter Product Price (in USD)" requiredstyle="margin: 10px; padding: 5px" type="text">

<div class="form-group"><标签>类别:<select class="form-control" name="categoryControl" formControlName="categoryControl"><option *ngFor="让类别的类别">{{分类名称}}</选项></选择>

<div class="form-group"><标签>制造商:<select class="form-control" formControlName="manufacturerControl" name="manufacturerControl"><option *ngFor="让制造商的制造商">{{生产商名称}}</选项></选择>