angular2配列型の単一値への双方向バインディング

Question

私のモデルで更新する必要がある値を選択するために子コンポーネントを使用しています。子コンポーネントは、Array<string>というモデルからプロパティを渡すと、Array<string>で@Input()を受け取ります。子として値が選択されると、モデルは更新されます。

しかし、追加の要件として、私のモデルの単一値（すなわち、通常のstring、非配列なので）のプロパティを渡す必要があります。また、ユーザーが子供の値を選択するたびに更新したい私の単一価値モデルのプロパティはすぐに。

私は[(selectedValues)]=[parentSingleValue]を使用してテンプレートから配列を作成しようとしたが、これは、私は、問題を説明するためplunkrを作成

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

で失敗します。テストする項目をクリックしてください：https://plnkr.co/edit/bHCAaycwZLOddry0gOU7

Answer 1

ここで間違っ

1. 複数のものがありますがあなたは[(selectedValues)]="parentValues"構文を必要としない、なぜなら子供から親に行くものは何もありません。 [selectedValues]="parentValues"は同じ働きをします。
2. これは、配列を渡して子の内部で配列を変更するためにのみ有効です。アレイのコピーを渡すと、動作を停止します。
3. @Output() eventEmitterは未使用です。あなたは、単に親ハンドルで、その後、@Input()パラメータを削除し、単純な文字列を放出する@Output() 1を変更することです達成しようとしているものに[selectedValues]="parentValues" (eventEmitter)="someEventHandlingMethod()"

ソリューションのような何かをした場合は使用されるでしょうそれを配列にプッシュして、同時に単一の値を設定することで、

子供：

@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