Estoy usando un componente secundario para seleccionar valores que deberían actualizarse en mi modelo. El componente secundario acepta un Array<string> a través @Input() si paso la propiedad de mi modelo, que es un Array<string> en sí mismo, todo funciona como se esperaba y cuando se selecciona un valor en el elemento secundario, el modelo se actualiza.
Sin embargo, como requisito adicional, también necesito pasar una propiedad de valor único (es decir, una string normal, por lo que no es una matriz) de mi modelo y cada vez que el usuario selecciona un valor en el elemento secundario, me gustaría actualizar mi valor único modelo de propiedad inmediatamente.
Intenté crear la matriz a partir de la plantilla usando [(selectedValues)]=[parentSingleValue] pero esto falla con
Error del analizador: token inesperado '=' en la columna 20 en [[parentSingleValue]=$event]
Creé un plunkr para ilustrar el problema. Haga clic en los elementos para probarlo: https://plnkr.co/edit/bHCAaycwZLOddry0gOU7
Hay varias cosas mal aquí
[(selectedValues)]="parentValues" , porque no hay nada que pase del elemento secundario al elemento principal: [selectedValues]="parentValues" funcionará de la misma manera.@Output() eventEmitter no se usa. Se usaría si hiciera algo como [selectedValues]="parentValues" (eventEmitter)="someEventHandlingMethod()" Una solución a lo que está tratando de lograr sería simplemente eliminar el parámetro @Input() y cambiar el @Output() uno para emitir una cadena simple, luego, en el padre, manéjelo empujándolo en la matriz y configurando el valor único al mismo tiempo.
Niño:
@Output() onItemSelected = new EventEmitter<string>(); ... public addValue(value: string) { this.onItemSelected.emit(value); }Padre:
export class App { parentValues: Array<string> = []; parentSingleValue = ''; itemSelected(item: string) { this.parentValues.push(item); this.parentSingleValue = item; } }Plantilla principal:
<h1>Simply:</h1> <app-child (onItemSelected)="itemSelected($event)"></app-child> Single value: {{parentSingleValue}}<br> <div *ngFor="let value of parentValues"> <p>{{value}}</p> </div>Su código funciona perfectamente bien, la razón es que asignó una cadena vacía.
Alternativamente,
<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 } }