无法以角度形式显示 formcontrol 对象

Question

我对 Angular 4 非常陌生，并且正在尝试学习 Angular。下面是我关于我试图通过 angular 4 开发的角​​度形式的问题。 该表单是只读的，不可编辑，我正在尝试使用以下服务将数据提取到表单中：

服务

  getCatalogDetails(Catalogid:number):Observable<any>{
                const headers = new HttpHeaders().set('Content-Type', 'application/json');

      return this.http.get<Catalog>
                (this.baseUrl+'api/CatalogItem/GetCatalogId/'+Catalogid,{headers,responseType: "json"})
                //.map(res=>res.Category.)
                .catch(this.handleError);

        }

我在下面的 FormComponent 中使用getCatalogDetails(Catalogid) 方法，但问题是我不知道如何将formdata 中的CatalogForm 使用服务获取到 HTML 模板中，我已经尝试过，但我是无法显示我使用通过 HTML 中的 JSON 接收到的 JSON 数据初始化的表单控件值。
FormComponent.ts

import { Component, OnInit } from '@angular/core';
import { Http, Headers } from '@angular/http';  
import { FormsModule,NgForm, FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';  
import { Router, ActivatedRoute } from '@angular/router';  
import { CatalogComponent } from '../catalog/catalog.component';  
import { CatalogService } from '../services/Catalog.service';  
import { ContactService } from '../services/Contact.service';
import { URLService } from '../services/URL.service';
import { SupportService } from '../services/Support.service';
import { Catalog } from '../classes/Catalog';
import { Contact } from '../classes/Contact';
import { URL } from '../classes/URL';
import { Support } from '../classes/Support';
import { Category } from '../classes/Category';


  @Component({
  selector: 'app-catalog-form',
  templateUrl: './catalog-form.component.html',
  styleUrls: ['./catalog-form.component.scss']
})
export class CatalogFormComponent implements OnInit {
  Catalogdata:Catalog;
  Contacts:Contact[];
  URLs:URL[];
  Supportdata:Support[];
  CatalogForm:FormGroup;
  title: string = "";  
  id: number;  
  errorMessage: any;  
  constructor( private _fb: FormBuilder,private _avRoute: ActivatedRoute,  
    private catService: CatalogService,private conservice:ContactService,
    private urlservice:URLService,private supservice:SupportService, private _router: Router) {
      if (this._avRoute.snapshot.params["id"]) {  
        this.id = this._avRoute.snapshot.params["id"]; 
     }
     this.CatalogForm = this._fb.group({ 

      Category: [''],
      SubCategory:[''],
      ItemName:[''],
      Description:[''],
      IAP_Number:[''],

      }) 
    }


  ngOnInit() {
    console.log("I am in form component",this.id);
    if (this.id > 0) {  
      this.title = "View"; 
      console.log("Title of form:",this.title) ;
      this.catService.getCatalogDetails(this.id)  
      .subscribe( t => 
        this.CatalogForm.setValue({Category:t,SubCategory:t,Description:t,ItemName:t,IAP_Number:t}) , err => 
          console.log("Error messgae:",this.errorMessage));
       }
    console.log("Catalog and Category Details:",(this.CatalogForm.controls['Category'].value));//this gives not output but this.CatalogForm gives me the form values
  }

  cancel() {  
    this._router.navigate(['/home']);  
}
get ItemName()  {return  this.CatalogForm.get('ItemName').value; }
}

formcomponent.html

 <h1>{{title}}</h1> 
        <h3>Catalog</h3> 
        <hr />  
        <fieldset>
                <legend>About Tool</legend>
                <form [formGroup]="CatalogForm"  #formDir="ngForm" novalidate> 
                    <div class="form-group row"> 
                     <div *ngIf="ItemName != null"></div>
                     <!--<div *ngFor="let c of Catalogdata;let index = index;"></div>-->
                     <label class="control-label col-md-12">ItemName</label>
                     <div class="col-md-4">
                      <input class="form-control" readonly="true" type="text" formControlName="ItemName" > //This gives me output in {object][object] format

                  </div>
                  </div>
                   <br /><br/>


              </form>

我试图在文本框中显示的 Json 格式：

  [
  cItem:{Category: "",
  SubCategory:"",
  ItemName:"",
  Description:"",
  }

所以我的问题是如何使用 formControlName 选项在 4 个不同的文本框中分别显示 Category、SubCategory、ItemName、Description 控件值

Answer 1

您没有为表单分配实际值，建议使用 patchValue 方法。

this.catService.getCatalogDetails(this.id)  
  .subscribe( t => 
    this.CatalogForm.patchValue({Category: t.Category, SubCategory: t.SubCategory, Description: t.Description, ItemName: t.ItemName ,IAP_Number: t.IAP_Number}) , err => 
      console.log("Error messgae:",this.errorMessage));

}