Question

这里有一些代码：

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

＆＃34;字段＆＃34;是＆＃34; item＆＃34;的每个字段的字符串等于的列表。宾语＆＃34;项目＆＃34;是一个具有多个属性的对象。

我想使用这个简单的* ngFor生成一个动态表单，并编写如下内容：

＆＃34; item.field＆＃34;

我做错了吗？

谢谢你！

Answer 1

只需使用：

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

Answer 2

尝试使用方括号表示法：

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

Answer 3

试试这段代码：

<!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>

输出：

Angular 2 * ngFor和动态字段

3 个答案: