angular2双向绑定数组类型为单个值

Question

我正在使用子组件来选择应在我的模型中更新的值。子组件通过@Input()通过@Input()接受如果我从我的模型中传递属性，这是一个Array<string>本身，一切都按预期工作，当在子中选择一个值时，模型将被更新。

但作为附加要求，我还需要传入模型的单值（即常规的，非数组）属性，并且每当用户选择要更新的子元素中的值时我的单值模型属性立即。

我试图创建使用[(selectedValues)]=[parentSingleValue]模板中的数组，但这个失败

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

我创建了一个plunkr来说明这个问题。点击这些项目来测试它：https://plnkr.co/edit/bHCAaycwZLOddry0gOU7

Answer 1

有多种事情错在这里

1. 你不需要[(selectedValues)]="parentValues"语法，因为从孩子到父母什么也没有 - [selectedValues]="parentValues"将工作相同。
2. 它只工作，因为你传递一个数组并修改子内的数组，所以 - 副作用。将它传递给数组的副本，它将停止工作。
3. 您的@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> 

Answer 2

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

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