Angular 7：动态显示字段

Question

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

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.

这将“解析”之前提到的public fieldsToAdd: searchInput[]; 中对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>

上面的代码基本上循环了来自searchComponent 类的集合FieldsToAdd。 它在他的内部添加了 div 标签和输入。如果您有复杂的输入，例如 select，请使用 *ngif=""。更多内容请参见this 文章。

注意：

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