[英]Angular 4 display Json array value using ndFor and Ngif in HTML page
我有一個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遍歷數組,並想要檢查工具所有者和業務所有者是否具有值,然后在單獨的文本框中顯示相應的contact_name。
<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>
嘗試這個。 我認為這將是您想要的。
<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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.