Как связать данные, поступающие в консоль, с HTML, используя primeng в angular2

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

Для привязки formControl in FormArray

STACKBLITZ DEMO

Вы можете отображать элементы как:

Здесь 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
  }

}