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

【问题标题】：Getting errors with a dynamic form and interpolation使用动态形式和插值获取错误
【发布时间】：2021-03-17 19:38:08
【问题描述】：

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

这是我的 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); 显示有数据：

我无法弄清楚为什么会出现这些错误。我希望我能解决插值错误

【问题讨论】：

在您的示例 form.UIElement 中是一个数组。您需要在循环通过 form.UIElement 的 h2 元素之后添加另一个 *ngFor 。

标签： html angular typescript interpolation

【解决方案1】：

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

【讨论】：