数组类型对单个值的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

  }
}

现场演示