[英]angular2 two-way-binding of array-type to single value
I'm using a child component to select values which should be updated in my model. 我正在使用子组件来选择应在模型中更新的值。 The child component accepts an
Array<string>
via @Input()
if I pass in property from my model which is an Array<string>
itself everything works as expected an when a value is selected in the child, the model gets updated. 子组件接受一个
Array<string>
通过@Input()
如果我的财产传给从我的模型,它是一个Array<string>
本身一切正常时,在孩子选择一个值预期的,该模型被更新。
However as an additional requirement I also need to pass in a single-valued (ie a regular string
, so non-array) property of my model and whenever the user selects a value in the child I'd like to update my single-value model property immediately. 但是,作为附加要求,我还需要传递模型的单值(即,常规
string
,即非数组)属性,并且每当用户在子级中选择一个值时,我都希望更新我的单值立即提供模型属性。
I tried creating the array from the template using [(selectedValues)]=[parentSingleValue]
but this fails with 我尝试使用
[(selectedValues)]=[parentSingleValue]
从模板创建数组,但是失败了
Parser Error: Unexpected token '=' at column 20 in [[parentSingleValue]=$event]
解析器错误:[[parentSingleValue] = $ event]中第20列出现意外令牌'='
I created a plunkr to illustrate the issue. 我创建了一个插件来说明这个问题。 Click the items to test it: https://plnkr.co/edit/bHCAaycwZLOddry0gOU7
单击项目进行测试: https : //plnkr.co/edit/bHCAaycwZLOddry0gOU7
There are multiple things wrong here 这里有很多错误
[(selectedValues)]="parentValues"
syntax, because there is nothing going from the child to the parent - [selectedValues]="parentValues"
will work the same. [(selectedValues)]="parentValues"
语法,因为从子级到父级之间没有任何关系- [selectedValues]="parentValues"
将起作用。 @Output() eventEmitter
is unused. @Output() eventEmitter
未使用。 It would be used if you did something like [selectedValues]="parentValues" (eventEmitter)="someEventHandlingMethod()"
[selectedValues]="parentValues" (eventEmitter)="someEventHandlingMethod()"
A solution to what you are trying to achieve would be to simply remove the @Input()
parameter, and change the @Output()
one to emit a simple string, then in the parent handle it by pushing it into the array and setting the single value at the same time. 一种解决方案,您只需删除
@Input()
参数,然后将@Output()
更改为发出一个简单的字符串,然后在父级中将其推入数组并设置同时显示单个值。
Child: 儿童:
@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;
}
}
Parent template: 父模板:
<h1>Simply:</h1>
<app-child (onItemSelected)="itemSelected($event)"></app-child>
Single value: {{parentSingleValue}}<br>
<div *ngFor="let value of parentValues">
<p>{{value}}</p>
</div>
Your code works perfectly fine, the reason is you assigned an empty string. 您的代码运行正常,原因是您分配了一个空字符串。
Alternatively, 或者,
<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
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.