angular2雙向綁定數組類型爲單個值

-1

我正在使用子組件來選擇應在我的模型中更新的值。子組件通過@Input()通過@Input()接受如果我從我的模型中傳遞屬性，這是一個Array<string>本身，一切都按預期工作，當在子中選擇一個值時，模型將被更新。angular2雙向綁定數組類型爲單個值

但作爲附加要求，我還需要傳入模型的單值（即常規的，非數組）屬性，並且每當用戶選擇要更新的子元素中的值時我的單值模型屬性立即。

我試圖創建使用[(selectedValues)]=[parentSingleValue]模板中的數組，但這個失敗

Parser Error: Unexpected token '=' at column 20 in [[parentSingleValue]=$event]

我創建了一個plunkr來說明這個問題。點擊這些項目來測試它：https://plnkr.co/edit/bHCAaycwZLOddry0gOU7

來源

2017-04-27 Korgen

有多種事情錯在這裏

你不需要[(selectedValues)]="parentValues"語法，因爲從孩子到父母什麼也沒有 - [selectedValues]="parentValues"將工作相同。
它只工作，因爲你傳遞一個數組並修改子內的數組，所以 - 副作用。將它傳遞給數組的副本，它將停止工作。
您的@Output() eventEmitter未使用。如果你不喜歡的東西[selectedValues]="parentValues" (eventEmitter)="someEventHandlingMethod()"

一個解決方案，你正在努力實現的是簡單地刪除@Input()參數，並更改@Output()一個發出一個簡單的字符串，然後父手柄會是怎樣使用它通過將它推入數組並同時設置單個值。

兒童：

@Output() 
onItemSelected = new EventEmitter<string>(); 

... 

public addValue(value: string) { 
    this.onItemSelected.emit(value); 
}

家長：

export class App { 
    parentValues: Array<string> = []; 
    parentSingleValue = ''; 

    itemSelected(item: string) { 
    this.parentValues.push(item); 
    this.parentSingleValue = item; 
    } 
}

父模板：

<h1>Simply:</h1> 
<app-child (onItemSelected)="itemSelected($event)"></app-child> 

Single value: {{parentSingleValue}}<br> 

<div *ngFor="let value of parentValues"> 
    <p>{{value}}</p> 
</div>

來源

2017-04-27 12:54:47

你的代碼工作得很好，原因是你分配了一個空字符串。

See modified one

另外，

<app-child [(selectedValues)]="parentValues"></app-child> 
<div *ngFor="let value of parentValues"> 
    <p>{{value}}</p> 
</div> 

<h1>With singleValue:</h1> 
<app-child [selectedValues]="converToArray(parentSingleValue)"></app-child> 
<div> 
    <p>{{parentSingleValue}}</p> 
</div> 


export class App { 
    title = 'app works!'; 
    parentValues: Array<string> = []; 
    parentSingleValue = '212121'; 
    converToArray(s:string){ 
    let temp= new Array(); 
    temp.push(s); 
    return temp 

    } 
}

LIVE DEMO

來源

2017-04-27 12:34:53 Aravind

既不與plunkr也不是你選擇的parentSingleValue當單擊該子項被更新。這就是我想要做的。 – Korgen

你在哪裏更新？ – Aravind

angular2雙向綁定數組類型爲單個值

回答

相關問題