Angular 7：动态显示字段

Question

我们正在尝试使用Spring Rest API作为后端在Angular 7中构建搜索页面。搜索页面的顶部有一个下拉列表。根据下拉菜单中的选择，应显示一组搜索字段。使用rest服务从数据库中获取要显示的字段的详细信息。下面随附的是这样的休息服务响应。

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[]

首先在Search 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=""。 this文章中有更多内容。

注意：

我建议您将itemType更改为<input type=""/>值，这样会使代码更简单。