html - 在 Angular 中遇到动态表单问题并显示正确的信息

Question

发生的事情是我从 api 调用接收到一个 xml 字符串，然后我使用 xml2js 将该字符串解析为 json。xml 具有某些我试图将其转换为表单的元素。我的问题是，在我的表单的一部分上，它两次构建相同的信息。

以下是给我带来一些麻烦的方法：

createUIListElements(){
    xml2js.parseString(this.xml, (err, result) => {
      this.uiListElement = result['cm:property-placeholder']['cm:default-properties'][0]['UIInput'][0]['UIListElement']
      console.log(this.uiListElement);
      let i = 0;
      this.uiListElementArray = this.uiListElement.map((element: { $: any;}) => element.$);
      this.uiListElementArray.forEach((element: any) => {
        this.createUIElementsList(i);
        i = i +1;
        console.log(element);
      })
      
    })
  }

  createUIElementsList(listElementNumber: number){
    xml2js.parseString(this.xml, (err, result) => {
      this.uiElement = result['cm:property-placeholder']['cm:default-properties'][0]['UIInput'][0]['UIListElement'][listElementNumber]['UIElement']
      console.log(this.uiElement)
      this.uiElements = this.uiElement.map((element: { $: any;} ) => element.$);
      this.uiElements.forEach((element: any) => {
        console.log(element);
      })
    })
  }

问题似乎是，在第二种方法的第 3 行，它仅使用在方法中在上面调用listElementNumber该方法时使用的最后一种。我怎样才能解决这个问题？createUIElementsList()createUIListElements()

这是供参考的XML：

<UIListElement id="hl7_file_type_{count}" name="HL7 File Type">
          <UIElement id="msgtype" name="Message Type" type="string" maxlength="15" required="true"></UIElement>
          <UIElement id="filename" name="File Name" type="string" maxlength="25" required="true"></UIElement>
        </UIListElement>
        
        <UIListElement id="upload_file_watch_{count}" name="Folder Watch">
          <UIElement id="desc" name="Description" type="string" maxlength="25" required=""></UIElement>
          <UIElement id="localfolder" name="Local Folder" type="string" maxlength="50" required=""></UIElement>
          <UIElement id="extensions" name="Label 3" type="string" maxlength="50" required=""></UIElement>
          <UIElement id="keep_original_extensions" name="Label 4" type="boolean" default="false"></UIElement>
          <UIElement id="alt_original_rptname" name="Label 5" type="string" maxlength="50"></UIElement>
          <UIElement id="local_rpt_site_code" name="Label 6" type="string" maxlength="50"></UIElement>
        </UIListElement>

这是供参考的HTML：

<div *ngIf="uiListElementArray">
    <div *ngFor="let form of uiListElementArray">
        <h2>
            {{form.name}}
        </h2>
        <div class="row pb-2" [formGroup]="xmlForm">
            <div class="col-lg-4" *ngFor="let form of uiElements">
                <div class="form-group" [ngSwitch]="form.type">
                    <div *ngSwitchCase="'string'">
                        <label _ngcontent-emf-c46="" for="input1">{{form.name}}</label>
                        <input _ngcontent-emf-c46="" type="text" [formControlName]="form.name" placeholder="" id="input1"
                            aria-describedby="Text field" name="name" class="form-control ng-untouched ng-pristine ng-valid"
                            ng-reflect-name="name" ng-reflect-model="">
                        <div *ngIf="xmlForm.get(form.name).dirty || xmlForm.get(form.name).touched">
                            <small class="error" *ngIf="xmlForm.get(form.name).errors?.required">
                                {{form.name}} is Required
                            </small>
                        </div>
                        <div *ngIf="xmlForm.get(form.name).dirty">
                            <small class="error" *ngIf="xmlForm.get(form.name).errors?.maxlength">
                                Max Length is {{form.maxlength}}
                            </small>
                        </div>
                    </div>
        
                    <div *ngSwitchCase="'number'">
                        <label _ngcontent-emf-c46="" for="input1">{{form.name}}</label>
                        <input _ngcontent-emf-c46="" type="text" [formControlName]="form.name" placeholder="" id="input1"
                            aria-describedby="Text field" name="name" class="form-control ng-untouched ng-pristine ng-valid"
                            ng-reflect-name="name" ng-reflect-model="">
                        <div *ngIf="xmlForm.get(form.name).dirty || xmlForm.get(form.name).touched">
                            <small class="error" *ngIf="!xmlForm.get(form.name).valid">
                                {{form.name}} is Required
                            </small>
                        </div>
                    </div>
        
                    <div *ngSwitchCase="'boolean'">
                        <label>
                            <input type="radio" [formControlName]="form.name" value="{{form.name}}"> {{form.name}}
                            <div *ngIf="xmlForm.get(form.name).dirty || xmlForm.get(form.name).touched">
                                <small class="error" *ngIf="!xmlForm.get(form.name).valid">
                                    {{form.name}} is Required
                                </small>
                            </div>
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

标签： htmlangularxmltypescript