angular2 Zwei-Wege-Bindung von Array-Typ zu Einzelwert

Question

Ich verwende eine Kindkomponente, um Werte auszuwählen, die in meinem Modell aktualisiert werden sollen. Die untergeordnete Komponente akzeptiert Array<string> über @Input(), wenn ich eine Eigenschaft aus meinem Modell übergebe, die eine Array<string> selbst ist, funktioniert alles wie erwartet, und wenn ein Wert im untergeordneten Element ausgewählt wird, wird das Modell aktualisiert.

Als zusätzliche Anforderung muss ich aber auch eine einwertige (dh eine reguläre string, also Nicht-Array) -Eigenschaft meines Modells und wann auch immer der Benutzer einen Wert in dem Kind auswähle, das ich aktualisieren möchte mein Einzelwertmodell sofort.

Ich habe versucht, das Array aus der Vorlage erstellen [(selectedValues)]=[parentSingleValue] verwenden, aber dies nicht gelingt mit

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

ich eine plunkr geschaffen um das Problem zu veranschaulichen. Klicken Sie auf die Elemente, um es zu testen: https://plnkr.co/edit/bHCAaycwZLOddry0gOU7

Answer 1

Es gibt mehrere Dinge falsch hier

1. Sie brauchen nicht die [(selectedValues)]="parentValues" Syntax, weil es geht nichts vom Kind zum Elternteil - [selectedValues]="parentValues" wird gleich funktionieren.
2. Es funktioniert nur, weil Sie ein Array übergeben und das Array innerhalb des untergeordneten Elements ändern, also - nebenbei. Übergeben Sie es eine Kopie des Arrays und es wird aufhören zu arbeiten.
3. Ihre @Output() eventEmitter ist nicht belegt. Es würde verwendet werden, wenn Sie so etwas wie [selectedValues]="parentValues" (eventEmitter)="someEventHandlingMethod()"
tun

Eine Lösung zu dem, was Sie versuchen, wären zu erreichen, einfach die @Input() Parameter zu entfernen, und ändern Sie den @Output() man einen einfachen String zu emittieren, dann in dem übergeordneten Griff indem Sie es in das Array schieben und gleichzeitig den einzelnen Wert einstellen.

Kind:

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

... 

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

Parent:

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

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

Eltern Vorlage:

<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

Ihr Code funktioniert einwandfrei, der Grund ist, dass Sie eine leere Zeichenfolge zugewiesen.

See modified one

Alternativ

<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