Question

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

控制台：

{
    data: []
}

getInfo(): Observable<responseModel<model[]>> {
    // API HTTP Call
}

我已经在变量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中创建了一个必须绑定数据的项目数组。

HTML：

Communicationx

TS：

 <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>

所以，在这里，进入控制台的数据必须绑定到HTML，有3个项目，所以我必须进行3组通信，并且必须绑定数据。请帮助

Answer 1

要在 FormArray

中绑定 formControl

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
  }

}

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

1 个答案: