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

Question

我正在使用子組件來選擇應在模型中更新的值。 子組件接受一個Array<string>通過@Input()如果我的財產傳給從我的模型，它是一個Array<string>本身一切正常時，在孩子選擇一個值預期的，該模型被更新。

但是，作為附加要求，我還需要傳遞模型的單值（即，常規string ，即非數組）屬性，並且每當用戶在子級中選擇一個值時，我都希望更新我的單值立即提供模型屬性。

我嘗試使用[(selectedValues)]=[parentSingleValue]從模板創建數組，但是失敗了

解析器錯誤：[[parentSingleValue] = $ event]中第20列出現意外令牌'='

我創建了一個插件來說明這個問題。 單擊項目進行測試： 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

您的代碼運行正常，原因是您分配了一個空字符串。

見修改后的一個

或者，

<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

  }
}

現場演示