基于数据库驱动的元数据或 json 响应在 angular2 中动态构建表单

Question

​我想根据 json 响应或 Angular 2

中的数据库驱动的元数据集合/表动态构建表单

第 1 天： json 响应对象中有 3 个字段。

{ 
"first_name : "John",
"last_name" : "Doe",
"phone" : "88888888"
}

从这个响应中，表单如下所示：

First name:  John  
Last Name: Doe  
Phone: 88888888​  

第 5 天：另一个名为 email 的字段被添加到 json 响应中，如下所示。

{ 
"first_name : "john",
"last_name" : "Doe",
"phone" : "88888888",
"email" : "john.doe@angular2.com"
}

是否可以在浏览器中显示电子邮件字段而无需在 Angular 2 中进行任何代码更改。

即因此没有测试和部署周期。 即基于某种形式的数据库驱动元数据动态构建表单或基于 json 响应对象构建表单。

表格应如下所示：

First name:  John  
Last Name: Doe  
Phone: 88888888​  
Email: john.doe@angular2.com​  

是否可以在 Angular 2 中实现？

Answer 1

据我了解，您有一个对象集合。并且您想动态填充您的字段。

所以，一个简单的方法是在客户端，我假设你使用的是 PHP，你可以使用这样的东西：

<div ng-init="yourAngularFunction(<?php $objUsed ?>);"> 

在你的 Angular 控制器中，创建一个模型：

$scope.yourAngularFunction = function(objUsed){
    $scope.objUsed = objUsed;
}

现在在您的 PHP 文件中，您可以使用并显示您的所有字段。

 First name: {{objUsed.first_name}}
 Last Name: {{objUsed.last_name }}
 ...

您还可以使用角度条件，例如 ng-if 来显示或不显示电子邮件字段。