时间戳

首页 > 解决方案 > Angular 7：动态显示字段

json - Angular 7：动态显示字段

问题描述

我们正在尝试使用 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"     
    }
    ]
}

标签： jsonangularrest

解决方案

假设您使用的是 TypeScript，请执行以下步骤：

让我们假设组件文件是search.component.ts- 组件脚本和search.component.html- 组件视图（标记）。

1. 为一个字段对象（数组中的一个对象）创建 TypeScript 类：

如果还没有，我建议您在客户端（角度）应用程序根目录中创建目录“类”。不管你是否创建，创建一个名为“searchInput.ts”的文件，然后编写新searchInput类：

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

searchInput2.将类导入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=""/>值，这样可以使代码更简单。

推荐阅读