使用动态形式和插值获取错误

Question

我收到每个属性的以下错误：

这是我的 component.ts 方法：

public uiListElement: UIListElement[] = [];

createUIListElements() {
    xml2js.parseString(this.xml, (err, result) => {
      result = result['cm:property-placeholder']['cm:default-properties'][0]['UIInput'][0]['UIListElement']
      this.uiListElement = result.map(data => data as UIListElement[])
      console.log(this.uiListElement);
    })
  }

这是我的 UIListElement 界面：

export interface UIListElement {
    $: { id: string; name: string; }
    UIElement:
    {
        $:
        {
            id: string;
            maxlength: string;
            name: string;
            required: string;
            type: string;
        }
    }
}

这是我的 HTML:

<div *ngIf="uiListElement">
    <div *ngFor="let form of uiListElement">
        <h2>
            {{form.$.name}}
        </h2>
        <div class="row pb-2" [formGroup]="xmlForm">
                <div class="form-group" [ngSwitch]="form.UIElement.$.type">
                    <div *ngSwitchCase="'string'">
                        <label _ngcontent-emf-c46="" for="input1">{{form.UIElement.$.name}}</label>
                        <input _ngcontent-emf-c46="" type="text" [formControlName]="form.UIElement.$.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.UIElement.$.name).dirty || xmlForm.get(form.UIElement.$.name).touched">
                            <small class="error" *ngIf="xmlForm.get(form.UIElement.$.name).errors?.required">
                                {{form.UIElement.$.name}} is Required
                            </small>
                        </div>
                        <div *ngIf="xmlForm.get(form.UIElement.$.name).dirty">
                            <small class="error" *ngIf="xmlForm.get(form.UIElement.$.name).errors?.maxlength">
                                Max Length is {{form.UIElement.$.maxlength}}
                            </small>
                        </div>
                    </div>
        
                    <div *ngSwitchCase="'number'">
                        <label _ngcontent-emf-c46="" for="input1">{{form.UIElement.$.name}}</label>
                        <input _ngcontent-emf-c46="" type="text" [formControlName]="form.UIElement.$.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.UIElement.$.name).dirty || xmlForm.get(form.UIElement.$.name).touched">
                            <small class="error" *ngIf="!xmlForm.get(form.UIElement.$.name).valid">
                                {{form.UIElement.$.name}} is Required
                            </small>
                        </div>
                    </div>
        
                    <div *ngSwitchCase="'boolean'">
                        <label>
                            <input type="radio" [formControlName]="form.UIElement.$.name" value="{{form.name}}"> {{form.UIElement.$.name}}
                            <div *ngIf="xmlForm.get(form.UIElement.$.name).dirty || xmlForm.get(form.UIElement.$.name).touched">
                                <small class="error" *ngIf="!xmlForm.get(form.UIElement.$.name).valid">
                                    {{form.UIElement.$.name}} is Required
                                </small>
                            </div>
                        </label>
                    </div>
                </div>
            
        </div>
    </div>
</div>

我的console.log(this.uiListElement);显示有数据：

我不明白为什么会出现这些错误。我希望我能解决插值错误

Answer 1

在您的示例中，this.uiListElement 是一个 UIListElement 数组。这意味着当您在 <div *ngFor="let form of uiListElement"> 中循环遍历此属性时，form 是一个 UIElement 数组并且您试图访问此数组的属性 type即 undefinded。所以你需要添加另一个循环，遍历 form.UIElement 数组。

使用动态形式和插值获取错误

Getting errors with a dynamic form and interpolation

html

interpolation

typescript

angular