Angular 2 * ngFor和动态字段

Question

Here a little code: 这里有一些代码：

<div *ngFor="let field of fields">
  <div>
    <label>{{field}}</label><input name="item.field" [(ngModel)]="item.field">
  </div>
</div>

"fields" is a list of string equals to each field of "item" object "item" is an object with several property. “字段”是等于“项目”对象的每个字段的字符串列表。“项目”是具有多个属性的对象。

i want to generate a dynamic form using this simple *ngFor and write something like: 我想使用此简单的* ngFor生成动态表单，并编写类似以下内容的内容：

"item.field" “ item.field”

Am i doing it wrong ? 我做错了吗？

Thx you ! 谢谢你！

Answer 1

只需使用：

<label>{{item[field]}}</label><input name="item[field]" [(ngModel)]="item[field]">

Answer 2

Try using square bracket notation: 尝试使用方括号表示法：

<div *ngFor="let field of fields">
    <div>
        <label>{{field}}</label><input name="item[field]" [(ngModel)]="item[field]">
    </div>
</div>

Answer 3

Try this code mate: 试试这个代码伴侣：

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="customersCtrl"> 

<table>
  <tr ng-repeat="x in fields">
    <td>
      <!-- field name -->
      {{x.field}}:
      <br>
      <!-- fields -->
      <input type="text" name="x.f" placeholder="{{x.hint}}">

      <br>

   </td>

  </tr>
</table>
<br>

<input type="submit" name="b1" value="submit">

</div>

<script>

var app = angular.module('myApp', []);

app.controller('customersCtrl', function($scope) 

{

$scope.fields = 
[{field:'name',hint:'enter name'},{field:'address',hint:'enter address'},{field:'phone', hint:'entercontact number'}];

});


</script>

</body>
</html>

OUTPUT: 输出：

Angular 2 * ngFor和动态字段

问题描述

3 个解决方案

解决方案1
0 2017-06-07 13:54:31

解决方案2
0 2017-06-07 13:55:19

解决方案3
-2 2017-06-07 13:43:18

Angular 2 * ngFor和动态字段

问题描述

3 个解决方案

解决方案1 0 2017-06-07 13:54:31

解决方案2 0 2017-06-07 13:55:19

解决方案3 -2 2017-06-07 13:43:18

解决方案1
0 2017-06-07 13:54:31

解决方案2
0 2017-06-07 13:55:19

解决方案3
-2 2017-06-07 13:43:18