如何在 angular2 中使用 primeng 将控制台中的数据绑定到 html

Question

我在控制台中有一个项目，我需要将这些数据绑定到 HTML 中。

安慰：

0: {Id: 116, User_Id: 1209, Active: 1, FirstName: "sad1", MiddleName: "asd1", LastName: "sd1",…}
Active: 1
Address: "{"Line1":"fdg","Line2":"f","City":"sfd","State":"xcvbv","Country":"bvn"}"
Animal: null
BirthDate: "2018-09-03T18:30:00.000Z"
Breed: null
Communication: "{[{"Language":"Italian (Italy)","Preferred":"Yes","Communication":null}] ,[{"Language":"Frysian (Netherlands)","Preferred":"No","Communication":""}],[{"Language":"German (Germany)","Preferred":"No","Communication":""}]}"
CreatedBy: 1209
CreatedDate: "2018-09-11T04:18:46.000Z"
Deceased: null
FirstName: "sad1"
Gender: "Male"
GenderStatus: null
GeneralPractitioner: "vbvcn"
Id: 116
LastName: "sd1"
Link: null
ManagingOrganization: "ddgsfg"
MaritalStatus: "Interlocutory"
MiddleName: "asd1"
MultipleBirth: null
Other: null
Photo: null
SourceId: null
SourceType: null
Species: null
Telecom: "{"Cell":"65675","Work":"vbn","Home":"gh"}"
Type: null
User_Id: 1209

我已经在变量中创建了项目数组Communicationx该数据必须绑定。

.HTML：

<div formArrayName="Communicationx" *ngFor="let item of emrPatientdetailsForm.get('Communicationx').controls; let i = index;trackBy: trackByIndex">
<div [formGroupName]="i">
<div class="col-sm-4 pull-left m-b10 m-t10">
<label class="col-sm-5 pull-left col-form-label g-color-gray-dark-v2 g-font-weight-700 text-sm-left no-padd">Preferred</label>
<div class="col-sm-7 pull-left no-padd">
<input type='text' (keyup)="searchDropDown(30, src6.value, i)" #src6 formControlName="Preferred" [(ngModel)]="selectedPreferred"
minlength="3" placeholder="Preferred" />
<i class="fa fa-caret-down"></i>
<div *ngIf="patientDropdown && patientDropdown?.preferred && IsHidden && contactIndex == i" class="emr-dropdown">
<ul *ngFor="let preferredType of patientDropdown?.preferred" (click)="getValue(preferredType, i)" class="p-l10 m-b0 brd-b">
<li>
{{preferredType.Description}}
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-4 pull-left m-b10 m-t10">
<label class="col-sm-5 pull-left col-form-label g-color-gray-dark-v2 g-font-weight-700 text-sm-left no-padd">Language</label>
<div class="col-sm-7 pull-left no-padd">
<input type='text' (keyup)="searchDropDown(176, src7.value ,i)" #src7 formControlName="Language" [value]="selectedLanguage"
minlength="3" placeholder="Language" />
<i class="fa fa-caret-down"></i>
<div *ngIf="patientDropdown && patientDropdown?.language && IsHidden && contactIndex == i" class="emr-dropdown">
<ul *ngFor="let languageType of patientDropdown?.language" (click)="getValue(languageType)" class="p-l10 m-b0 brd-b">
<li>
{{languageType.Description}}
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-4 pull-left m-b10 m-t10"></div>
<a *ngIf="emrPatientdetailsForm.get('Communicationx').controls.length > 1" class="col-sm-2 pull-left m-b10 m-t10 delbtn" (click)="deleteCommunicationDetails(i)">
delete
</a>
</div>
</div>

TS：

public patientFormInit() {
this.emrPatientdetailsForm = this.FB.group({
Communicationx: this.FB.array([this.createCommunicationInformation()])
});
if (this.patientId) {
this.getPateintBasicInfo();
}
}
private createCommunicationInformation() {
return this.FB.group({
Language: [''],
Preferred: [''],
Communication: ['']
})
}
private getPateintBasicInfo() {
let params = { 'Id': this.userId }
this.emrService.getEmrPatientBasicInfo(params).subscribe(pateintBasicInfoLists => {
this.listPatientInfo = pateintBasicInfoLists.Body.Data[0];
console.log(this.listPatientInfo[0].Communication);
let res = pateintBasicInfoLists.Body.Data[0][0];
this.emrPatientdetailsForm.patchValue({
Communicationx: res.Communication
})
})
}

因此，在这里，控制台中的数据必须绑定到 HTML，有 3 个项目，所以我必须获得 3 组通信，并且数据必须绑定。 请帮忙

Answer 1

在FormArray中绑定formControl

堆栈闪电战演示

您可以将元素显示为：

这里的Communicationx是表单数组。

.HTML：

<form [formGroup]="emrPatientdetailsForm">
<div formArrayName="Communicationx" *ngFor="let item of emrPatientdetailsForm.get('Communicationx').controls; let i = index;trackBy: trackByIndex">
<div [formGroupName]="i">
<div class="col-sm-4 pull-left m-b10 m-t10">
<label class="col-sm-5 pull-left col-form-label g-color-gray-dark-v2 g-font-weight-700 text-sm-left no-padd">Preferred</label>
<div class="col-sm-7 pull-left no-padd">
<input type='text' #src6 formControlName="Preferred" minlength="3" placeholder="Preferred" />
<i class="fa fa-caret-down"></i>
</div>
</div>
<div class="col-sm-4 pull-left m-b10 m-t10">
<label class="col-sm-5 pull-left col-form-label g-color-gray-dark-v2 g-font-weight-700 text-sm-left no-padd">Language</label>
<div class="col-sm-7 pull-left no-padd">
<input type='text' #src7 formControlName="Language" minlength="3" placeholder="Language" />
<i class="fa fa-caret-down"></i>
</div>
</div>
<div class="col-sm-4 pull-left m-b10 m-t10"></div>
</div>
</div>
</form>

TS：

import { Component, OnInit } from '@angular/core';
import { FormArray, FormBuilder, FormGroup } from '@angular/forms';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
ngOnInit() {
this.patientFormInit();

for (let data of this.Communicationx) {
this.addValue(data);
}
}
emrPatientdetailsForm: FormGroup
constructor(private _fb: FormBuilder) {
}
Communicationx = [{ "Language": "Italian (Italy)", "Preferred": "Yes", "Communication": null }];
public patientFormInit() {
this.emrPatientdetailsForm = this._fb.group({
Communicationx: this._fb.array([])
});
}
private createCommunicationInformation(data) {
return this._fb.group({
Language: data.Language,
Preferred: data.Preferred,
Communication: data.Communication
})
}
addValue(data) {
this.getData().push(this.createCommunicationInformation(data));
}
getData() {
return this.emrPatientdetailsForm.controls.Communicationx as FormArray
}
}