2017-02-10 16 views
7

結合我得到了以下的html數據的一種方式在Angular2

<app-grid [columns]="columns" [data]="data" ></app-grid> 

我想要的數據和列屬性是不可改變的。網格應該只顯示它​​。但在排序或過濾的情況下,數據會改變,至少是順序。

但這是我的問題。如果我訪問數據數組並修改包含對象的一個​​屬性。喜歡這個。

this.data[0].name = "test" 

原始被更改。但我認爲[數據]只是數據綁定的一種方式。

有人可以指出我正確的方向,爲什麼發生這種情況,我怎麼可以忽略它。我來自React,這是非常簡單的。

+0

如果你想'data'爲不可變的肯定你不應該那樣修改它?在子組件中,您應該創建一個包含相關修改的新「數據」數組。 –

+0

但我認爲這是單向數據綁定的要點。傳遞的數據不能從下面的組件修改。就像反應一樣。或者我錯過了什麼? – Daniel

+0

你必須明白綁定的意義。綁定意味着將某些東西綁定到其他東西上。所以不管是單向綁定還是雙向綁定,它們都是綁定的,這意味着應該有某種綁定的東西。單向意味着綁定是一個方向(模型來查看)。雙向意味着綁定是兩個方向(Model來查看和查看模型)。 –

回答

10

你是對的,語法[target]=expression是一種單向數據綁定,但我認爲你誤解了單向數據綁定的想法。

從數據源到視圖目標的單向數據綁定意味着來自視圖的值不會傳遞迴組件,而對組件中的表達式所做的任何更改都會反映在視圖中 - 這是單向數據從數據源綁定到視圖,並不意味着它是一次性單向數據綁定。

另一方面,您可能會發現從視圖目標到數據源的單向數據綁定,語法爲(target)=expression,用於將事件傳遞迴組件。

你可以在這裏找到更多關於Angular2數據綁定的信息:https://angular.io/docs/ts/latest/guide/template-syntax.html#!#binding-syntax

8
  • 如果使用[ngModel][value]{{ param }}等你有一個雙向綁定,模型查看,
  • 如果你使用(ngModelChange)你有一個雙向綁定,以模型,
  • 如果您使用[(ngModel)]你有雙向綁定。

但是您使用的輸入爲@Input()屬性的子組件與此跳舞;-)該符號不是它看起來像,因爲它總是綁定。

<sub-component [prop]="myObj"></sub-component> 

所以,如果你改變了MyObj中在你的子組件,它將被綁定:

ngOnInit() { 
    this.myObj = this.myObj.push(this.newObj); 
} 

您可以用MyObj中的本地副本,以防止具有約束力。

如果從模型需要更新,你可以用@Output()推動它作爲事件:

<sub-component [prop]="myObj" (update)="myObj = $event"></sub-component> 
4

從角官方文檔:

enter image description here

相關問題