Dynami c Ioni c Элементы / Входы - PullRequest
Новая
       24

Dynami c Ioni c Элементы / Входы

0 голосов
/ 28 февраля 2020

Я нахожусь в процессе изучения структуры c. Я собираю JSON для формирования системы, я знаю, что есть некоторые пакеты, которые справляются с этим, но я бы хотел создать простой. В настоящий момент он прекрасно работает, однако мне было интересно, есть ли способ динамически выбирать, какие входы я собираюсь использовать. В идеале я мог бы определить входные данные в теге html, например: однако это не так.

Я работал над этим, используя операторы ngIf, как вы можете видеть ниже: 

    <ion-card *ngFor="let gf of generatedForm">
      <h1>{{gf.slug}}</h1>
      <ion-item>
        <ion-label>{{gf.data.label}}</ion-label>
        <ng-container *ngIf="gf.data.type === 'select'">
          <ion-select multiple={{gf.data.multiple}} placeholder="Select One">
            <ion-select-option *ngFor="let gfs of gf.schema.enum" value={{gfs}}>{{gfs}}</ion-select-option>
          </ion-select>
        </ng-container>
        <ng-container *ngIf="gf.data.type === 'textarea'">
          <ion-label position="floating">Description</ion-label>
          <ion-textarea></ion-textarea>
        </ng-container>
        <ng-container *ngIf="gf.data.type !== 'textarea' || gf.data.type !== 'select'">
          <ion-input type={{gf.data.type}}></ion-input>
        </ng-container>
      </ion-item>
    </ion-card>

Как я уже сказал, он работает хорошо, но мне действительно не нравится, как я делаю это и было интересно, есть ли более изощренный способ сделать это, а не операторы if для каждого типа входного тега. Теги, такие как текст, дата и время, работают внутри тега <ion-input-type="type>, что замечательно, но так как textarea и select - это разные теги, это невозможно сделать с помощью этого.

Итак, как я могу это уточнить? Извините, если я упускаю очевидное, я просто трепещу здесь. Файл машинописи страницы использует сервис, который я построил для форматирования данных JSON, которые я извлекаю и возвращаю, поэтому я могу добавлять определенные поля и манипулировать этими данными, если это необходимо. Я не буду публиковать этот код здесь, но данные, которые я могу использовать, включают в себя такие параметры, как тип ввода, требуемый, метка, множественный выбор и т. Д. c.

Спасибо!

1 Ответ

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

Вы можете создать компонент для каждого выбора, после чего вы можете создавать их динамически из файла машинописного текста. Это может быть реализовано с использованием ComponentFactoryResolver

Typescript 

import { ViewChild, ViewContainerRef, ComponentFactoryResolver, ComponentFactory } from '@angular/core';
...//Components imports.

@ViewChild("container", { read: ViewContainerRef, static: true }) container;
// Every type is mapped to a component reference
component = {
    'text': TextComponent,
    'number': NumberComponent,
    'hidden': HiddenComponent,
    'date': DateComponent,
    'text_area': TextAreaComponent,
    'relationship': DropdownComponent,
    'select_dropdown': TextComponent,
    'file': FileComponent,
    'checkbox': CheckboxComponent,
    'select': DropdownComponent,
    'offerItems': OfferItemsComponent,
    'password':PasswordComponent,
  }
      constructor( private resolver: ComponentFactoryResolver) { }
      createComponent(type) {
        const factory: ComponentFactory<any> = this.resolver.resolveComponentFactory(this.component[type]);
        this.componentRef = this.container.createComponent(factory);
      }

Так что вам нужно l oop для ваших данных и каждый раз, когда вам нужно вызвать функцию.

html

<div #container>
    <template>
    </template>
</div>
...