Угловой 7: Отображать поля динамически

Question

Мы пытаемся создать поисковую страницу в Angular 7 с использованием Spring Rest API в качестве бэкэнда.Страница поиска имеет раскрывающийся список сверху.В зависимости от выбора в раскрывающемся списке должен отображаться набор полей поиска.Детали отображаемых полей извлекаются из БД с помощью службы отдыха.Ниже приведен такой ответ службы отдыха.

fieldType определяет тип поля, т. Е. Текст, раскрывающийся список, календарь и т. Д. Как мы можем создать угловой компонент для отображения полей, основанных на этом ответе json?

{
  "docs": [
    {
      "collectionId": "letterCollection",
      "collectionName": "Letters",
      "fieldId": "LetterType",
      "fieldName": "Letter Type",
      "fieldLabel": "LetterType",
      "fieldType": "DROPDOWN",
      "placeHolder": "",
      "searchFieldSequence": "0"     
    },
    {
      "collectionId": "letterCollection",
      "collectionName": "Letters",
      "fieldId": "ProcessDate",
      "fieldName": "Process Date",
      "fieldLabel": "ProcessDate",
      "fieldType": "TEXT",
      "placeHolder": "YYYY/MM/DD",
      "searchFieldSequence": "1"     
    }
    ]
}

Answer 1

Предполагая, что вы используете TypeScript, выполните следующие действия:

Предположим, что файлы компонентов search.component.ts - скрипт компонента и search.component.html - вид компонента (разметка).

1. Создать класс TypeScript для одного объекта поля (один объект в массиве):

Я бы предложил вам создать, если еще нет никого, каталог "class" в корне клиентского (углового) приложения. Неважно, создали вы или нет, создайте файл с именем "searchInput.ts" и напишите новый класс searchInput:

external class searchInput {
    collectionId: string,
    collectionName: string,
    fieldId: string,
    fieldName: string,
    fieldLabel: string,
    fieldType: string,
    placeHolder: string,
    searchFieldSequence: string
}

2. Импортируйте класс searchInput в файл search.component.ts и анализируйте ответ REST API как searchInput[]

В компоненте «Файл поиска typeScript» сначала импортируйте searchInput:

import { searchInput } from '../class/searchInput' 

Заменить строку после from, чтобы импортировать правильный файл (и класс)

Кроме того, добавьте searchInput[] переменную к классу SearchComponent (или к любому другому классу для компонента search) следующим образом:

export class SearchComponent {
    public fieldsToAdd: searchInput[]; //creating searchInput array.
    ...
}

Более того, я предполагаю, что у вас есть объект result в качестве ответа сервера, и следующие строки кода должны быть выполнены в сценарий успеха:

   fieldsToAdd = result.json as searchInput[]; //if you're using JSON
   fieldsToAdd = result.json as searchInput[]; //if you're using any other method, but AFTER encoding.

Это будет "анализировать" объекты из ответа на searchInput[] в public fieldsToAdd: searchInput[];, упомянутом ранее.

3. Последний шаг: измените search.component.html для разбора и отображения полей:

В любой элемент, в который вы хотите поместить ввод (может быть div, section, просто соответствуют правилам разметки HTML), добавьте:

<div *ngFor="let fieldToAdd in fieldsToAdd">
<label>{{FieldToAdd.fieldLabel}}</label>
    <input type="{{FieldToAdd.fieldType}}" name={{FieldToAdd.fieldName}} id={{FieldToAdd.fieldId}} placeholder="{{FieldToAdd.fieldType}}" />
</div>

код выше в основном циклически перебирает коллекцию FieldsToAdd из класса searchComponent. Он добавляет, div, внутри него ярлык и ввод. если у вас есть сложные входы, такие как select, используйте *ngif="". больше на этой статье.

Примечание:

Я бы посоветовал вам изменить itemType на значение <input type=""/>, чтобы сделать код проще.