Angular CLI 8 - Собственный выбор для схемы json (черновик 4) - PullRequest
Новая
       8

Angular CLI 8 - Собственный выбор для схемы json (черновик 4)

1 голос
/ 26 марта 2020

У меня есть некоторые трудности с тем, чтобы моя схема json (черновик 4) полностью работала с Angular -Формальными шаблонами пользовательских шаблонов. Я сделал несколько шаблонов для различных типов данных, и я застрял с шаблоном для выпадающего меню, используя тег выбора в Angular CLI. Я нашел много примеров того, как сделать компонент выбора для более новых json схем, но не для более старых схем, где enum (см .: my json part) используется для выбора.

Вот моя 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 { }

Неожиданный результат:

unexpected result

Мой сценарий, очевидно, несколько неполон или даже неверен. Я пытаюсь понять, как правильно загрузить часть 'enum' в мой тег 'option'. Текущий результат - выпадающее меню с объектами вместо текста. Пожалуйста, имейте в виду, что эта json схема создана с использованием http://json-schema.org/draft-4/schema#, и она должна оставаться такой.

Любая помощь приветствуется!

Спасибо.

ОБНОВЛЕНИЕ (решено) :

Это удалось решить с помощью функции json pipe, чтобы увидеть, что находится в объекте. После этого я смог исправить свой сценарий так, чтобы элементы объектов отображались правильно.

Вот мой фиксированный компонент, если кому-то нужно что-то подобное сделать. 

@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 { }

1 Ответ

0 голосов
/ 26 марта 2020

Был в состоянии решить эту проблему с помощью функции json pipe {{ item | json }}, чтобы увидеть, что было внутри моего объекта. После этого я смог исправить свой скрипт, чтобы объекты отображались правильно. Я включил свой скрипт с фиксированными компонентами в моё обновление выше.

...