0
我嘗試使用Angular2的一種方式綁定到輸入字段值綁定到一個JSON屬性。
JSON對象看起來是這樣的:Angular2 - 如何使用一種方法綁定綁定到JSON屬性
[
{
"name": "my name",
"list": [
{
"date": "0101970",
"list": [
{
"timespan": "6-7",
"entries": [
{
"name": ""
},
{
"name": ""
},
{
"name": ""
}
]
}
]
}
]
}
]
我想將值綁定到的entries
特定name
屬性。
這是我嘗試做的方式結合:
<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">
那有什麼問題呢?
我可以使用雙向綁定,而不是過程,但我有一些其他的限制(禁止表單元素)按下該按鈕之後的按鈕並沒有對用戶輸入剛剛申請。
謝謝您的回答,但加入'(ngModelChange)=」 model = $ event「'輸入元素不起作用。另外,沒有錯誤消息。正如我前面所說,由於其他限制,我不能使用'[(ngModel)] =「model」'。我只想將輸入綁定到模型。如果模型更改,我不想更新視圖。 – Allipon
如果你不想或不能使用'ngModel',那麼你需要監聽輸入元素本身的事件,比如''(或者任何其他像'(blur)',(keypress)',...'(ngModel)'一樣發出輸入的事件都不會做任何事情,因爲沒有'ngModel'事件''[(ngModel)]'only因爲這是一種特殊的形式,其中'[xxx] =「model」'和'(xxxChange)=「model = $ event」'可以結合到'[(xxx)] =「model」' –
謝謝! ngModel可以完成這項工作...我現在使用(更改)。 – Allipon