Angular 4 отображает значение массива Json, используя ndFor и Ngif на странице HTML

Question

У меня есть страница HTMLform, где я пытаюсь показать массив данных Json в отдельных текстовых полях, но я не могу этого сделать. Мой код уровня компонента находится ниже:

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:[''],
      /*ToolOwner:[''],
      BusinessOwner:[''],
      ProdURL:[''],
      IncidentURL:[''],
      RequestURL:[''],
      SupportType:[''],
      SupportValue:[''],
      SupportLink:['']*/
      }) 
    }


  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.patchValue
        ({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.
    //get(['cItem']));
  }

  cancel() {  
    this._router.navigate(['/home']);  
}

Мой JSONданные выглядят следующим образом:

Array(2)
0
:
{contact_Id: 5, catalog_Item_Id: 4, contact_Type: "Tool Owner", contact_Name: "tyu", catalog_Item_ID: null}
1
:
{contact_Id: 6, catalog_Item_Id: 4, contact_Type: "Business Owner", contact_Name: "BC", catalog_Item_ID: null}

Я хочу показать владельца инструмента и владельца бизнеса в виде отдельных текстовых полей с соответствующими значениями contact_Name для этого индекса массива, а также, если в contact_name присутствуют значения, разделенные запятыми, как я должен это сделать?иди и покажи это в текстовом поле.Я застрял в этом надолго, пожалуйста, помогите мне с этим.Мой HTML-код находится ниже, где я пытаюсь с помощью ngfor выполнить итерацию по массиву и хочу проверить, имеет ли значение владелец инструмента и владелец бизнеса, а затем отобразить соответствующее имя контакта в отдельных текстовых полях.

<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 CatalogForm;let i=index"></div>-->
                 <label class="control-label col-md-12">ItemName</label>
                 <div class="col-md-4"></div>
                  <input class="form-control" readonly="true" type="text" formControlName="Category"  >


             </form>

Answer 1

Попробуй это.Я думаю, что это будет то, что вы хотите.

<div *ngFor="let c of CatalogForm ">
                            <div *ngIf="c === 'Tool Owner'">
    {{c.contact_Type}} ..........
    </div>
    </div>


    <div *ngFor="let c of CatalogForm ">
                            <div *ngIf="c === 'Business Owner'">
    {{c.contact_Type}}.  ..........
    </div>
    </div>