Angular CLI 8 - json 模式的正式自定义 select（草案 4）

Question

我在使 json 架构（草稿 4）完全与 Angular-Formly 表单自定义模板配合使用时遇到了一些困难。我已经为各种数据类型制作了几个模板，但我一直使用 Angular CLI 中的 select 标记的下拉菜单模板。我发现了很多关于如何为较新的 json 模式制作 select 组件的示例，但不是为 enum 的旧模式制作组件的示例（请参阅：我的 json部分）用于select离子。

这是我的 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 { }

意外结果：

我的剧本显然有些不完整甚至是错误的。我想弄清楚如何将 'enum' 部分正确加载到我的 'option' 标签中。当前结果是一个带有对象而不是文本的下拉菜单。请记住，此 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 { }

Answer 1

能够使用 json 管道功能 {{ item | json }} 来解决这个问题，以查看我的对象中有什么。在那之后，我能够修复我的脚本，以便正确显示对象项。我在上面的更新中包含了我的固定组件脚本。

Angular CLI 8 - json 模式的正式自定义 select（草案 4）

Angular CLI 8 - Formly custom select for json schema (draft 4)

jsonschema

angular-material

angular-formly

angular-cli-v8