Question

我使用子组件选择应在我的模型中更新的值。子组件通过Array<string>通过@Input()接受Array<string>如果我从我的模型中传入属性string本身一切正常，当孩子选择了一个值时，模型得到更新。

然而，作为一个额外的要求，我还需要传入我的模型的单值（即常规[(selectedValues)]=[parentSingleValue]，非数组）属性，并且只要用户选择了孩子中的值，我就会＃39 ; d想立即更新我的单值模型属性。

我尝试使用<img src="{!! '/images/product-feature/'.$item->product_preview !!}">从模板创建数组但是

失败了

分析器错误：意外的令牌＆＃39; =＆＃39;在第20栏 [[parentSingleValue] = $事件]

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

Answer 1

这里有很多错误

您不需要[(selectedValues)]="parentValues"语法，因为从孩子到父母没有任何内容 - [selectedValues]="parentValues"也会一样。
它只能起作用，因为你传递一个数组并修改子内部的数组，所以 - 副作用。传递它的数组副本，它将停止工作。
您的@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

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

2 个答案: