Question

我尝试使用Angular2的单向数据绑定将输入字段值绑定到JSON属性。
JSON对象如下所示：

[
  {
    "name": "my name",
    "list": [
      {
        "date": "0101970",
        "list": [
          {
            "timespan": "6-7",
            "entries": [
              {
                "name": ""
              },
              {
                "name": ""
              },
              {
                "name": ""
              }
            ]
          }
        ]
      }
    ]
  }
]

我想将值绑定到name的特定entries属性这就是我尝试进行绑定的方式：

<div class="col-md-4" *ngFor="#category of categories">
        <div>
            <div class="col-md-12">
                <h1>{{category.name}}</h1>
            </div>
        </div>
        <div *ngFor="#listentry of category.list">
            <div class="row">
                <div class="col-md-12">
                    <h2>{{listentry.date}}</h2>
                </div>
            </div>

            <div class="row" *ngFor="#shift of listentry.list">
                <div class="row">
                    {{shift.timespan}}
                </div>
                <div class="row" *ngFor="#entry of shift.entries">
                    <div class="col-md-10">
                        <input type="text" class="form-control" (ngModel)="entry.name">
                    </div>
                </div>
            </div>
        </div>
    </div>

这是我的组件：

export class InputComponent {

public categories:Category[];

constructor(private _dataService:DataService) { 
 // ... fetch data from the service here
}
}

据我所知，Angular2 (ngModel)="attribute"中的数据绑定从视图绑定到模型，[ngModel]="attribute"以相反的方式绑定。
那么，我的<input type="text" class="form-control" (ngModel)="entry.name">又出了什么问题呢？

我当然可以使用双向数据绑定，但我有一些其他约束（禁用表单元素），这些约束仅在按下按钮后应用，而不是用户输入。

Answer 1

使用

<input type="text" class="form-control" [ngModel]="entry.name">

将JSON值绑定到输入。

(ngModelChange)="model=$event" updates the model when an `ngModelChange` event is emitted.

[(ngModel)]="model" binds two-way

其中ngModel是带

的指令

@Input() ngModel; // for the [ngModel]="..." bindign
@Output() ngModelChange = EventEmitter(); // for the (ngModelChange)="..." binding

他们一起支持简写形式

[(ngModel)]="model"

Angular2 - 如何使用单向数据绑定绑定到JSON属性

1 个答案: