我在使json模式(草案4)完全与Angular-Formly表单自定义模板一起使用时遇到一些困难。我已经为各种数据类型制作了多个模板,并且使用Angular CLI中的select标记来固定下拉菜单模板。我已经找到了许多示例,这些示例说明了如何为较新的json模式创建选择组件,而对于使用enum(请参阅:我的json部分)进行选择的旧模式,则不是。
这是我的json部分:
"hardware": { "type": "object", "title": "hw.net", "properties": { "network-0": { "type": "string", "title": "hw.net.types", "enum": [ "dhcp", "static" ], "default": "dhcp" } } }
这是我在Angular中使用的方法(更新:26.03.2020,14:37):
import { Component } from '@angular/core'; import { FieldType } from '@ngx-formly/core'; @Component({ selector: 'formly-enum-type', template: ` <mat-label *ngIf="to.label">{{ to.label | translate }}</mat-label> <mat-select [formControl]="formControl" [formlyAttributes]="field" (selectionChange)="to.change && to.change(field, formControl)"> <ng-container *ngFor="let item of to.options"> <mat-option [value]="item">{{ item }}</mat-option> </ng-container> </mat-select> `, }) export class EnumTypeComponent extends FieldType { }
意外结果:
我的脚本显然有些不完整甚至是错误的。我试图弄清楚如何正确地将“枚举”部分加载到我的“选项”标签中。当前结果是一个下拉菜单,其中包含对象而不是文本。请记住,此json模式是使用[http://json-schema.org/draft-4/schema#
创建的,必须保持这种方式。感谢您的任何帮助!
谢谢。
更新(已解决)
:能够使用json管道功能解决此问题,以查看对象中的内容。之后,我能够修复脚本,以便正确显示对象项。
如果有人需要做类似的事情,这是我的固定组件。
@Component({
selector: 'formly-enum-type',
template: `
<mat-label *ngIf="to.label">{{ to.label | translate }}</mat-label>
<mat-select [formControl]="formControl" [formlyAttributes]="field" (selectionChange)="to.change && to.change(field, formControl)">
<ng-container *ngFor="let item of to.options">
<mat-option [value]="item.value">{{ item.label }}</mat-option>
</ng-container>
</mat-select>
`,
})
export class EnumTypeComponent extends FieldType { }
我在使json模式(草案4)完全与Angular-Formly表单自定义模板一起使用时遇到一些困难。我已经为各种数据类型制作了几个模板,但我坚持使用模板...
能够使用json管道功能{{ item | json }}
解决此问题,以查看对象内部的内容。之后,我能够修复脚本,以便正确显示对象项。我在上面的更新中包括了固定组件脚本。