容器上下文中的AngularUse函数

omtl5h9j  于 2021-09-29  发布在  Java
关注(0)|答案(1)|浏览(371)

我想建立一个复选框结构,我想动态地处理它。我的服务返回了一个对象响应。然而,当我在上下文中使用这个函数时,我会得到一个字符串返回,我不能使用ngfor。
form.demo.component.ts

getElementChoicesByNKey(nkey:string):choiceModel[]{
     var element = this.findInComponentsByNKey(nkey);
     var res = element.Choices;
     return res;
   }

此函数提供正确的返回。
form.demo.component.html

...
                        <ng-container *ngIf="item.Type == 'Choice'">
                          <ng-container *ngTemplateOutlet="choiceTheme; context:{ Id: item.Id, Label: item.Label, Choices: getElementChoicesByNKey(item.Id) }"></ng-container> 
                        </ng-container>
...
                <ng-template #choiceTheme let-Id="Id" let-Label="Label" let-Choices="Choices">
                  <nz-form-item>                      
                    <nz-form-label nzFor="Id">{{Label}}</nz-form-label>
                    <nz-form-control [formControlName]="Id" nzErrorTip="{{ 'form.requiredText' | translate }}"> 
                      <p>{{Choices.length}}</p>
                      <div *ngFor="let item of Choices">
                        <p>test</p>
                      </div>                               
                    </nz-form-control>
                  </nz-form-item>            
                </ng-template>
...

此处选项显示为字符串,不允许我使用ngfor。我得到一个错误如下。
找不到类型为“string”的不同支持对象“[{label:'apple',value:'apple',checked:true},{label:'pear',value:'pear',checked:false},{label:'orange',value:'orange',checked:false}]”。ngfor只支持绑定到数组之类的可重用文件。
我错过了什么?谢谢你的帮助。

l7wslrjt

l7wslrjt1#

使用 *ngFor="let item of getChoices(Choices)" 在模板和中 component.ts ```
getChoices(choiceStr) {
return JSON.parse(choiceStr);
}

既然你越来越 `Choices` 作为字符串,将字符串解析为数组,以便 `ngFor` 工作

相关问题