2017-07-10 65 views
1

綁定對象的陣列,以子組件我有具有對象如何雙向從父組件在角2

this.arr = [ 
{ 
    style :'sample.css', 
    disabled : this.formControl.valid 
}, 
{ 
    style : 'sample.css', 
    disabled : this.formControl.valid 
}]; 

注意的陣列的父組件:this.formControl.valid指示是否是表格很髒或沒有。

我傳遞這個陣列子組件

<child-component [controlConfiguration] ='arr'></child-component> 

在子組件我已露出的輸入變量

export class ChildComponent{ 
     @Input() 
     controlConfiguration : any; 
} 

ChildComponent有以下的html

<div> 
    <button *ngFor='let item of controlConfiguration' [disabled]='!item.disabled' ></button> 
</div> 

更改不會傳播從父組件到子組件如預期的結果是按鈕應該只要表單有效,就立即啓用。

如何做到這一點....?>

+0

'let arr'表示這是一個局部變量。 '[controlConfiguration] ='arr''中的'arr'是指'this.arr',所以你需要綁定到'this.arr = [..' – echonax

+0

這是這個.arr只有我更新了問題。 – Deathcr47

+0

你可以創建一個運動員嗎? –

回答

0

您需要每次輸入值發生變化,因爲this.inputText是一種原始的時間來更新的this.arr財產displayText。我已經添加(ngModelChange)="update($event)update(value) {...}方法:

<input type='text' [(ngModel)]='inputText' (ngModelChange)="update($event)"> 
... 
export class ParentComponent { 
    inputText : string; 

    arr = [{ 
    displayText : this.inputText 
    },{ 
    displayText : this.inputText 
    }]; 

    update(value) { 
    this.arr[0].displayText = value; 
    this.arr[1].displayText = value; 
    } 

這裏是working plunker