user3554083 user3554083 - 6 months ago 24
jQuery Question

angular2 pass object with selector

I have a problem that I cannot pass an object to a component from a selector.
I don't know if this is even possible.

So what I want is to have a select dropdown with objects fetched from a rest service.
Then on select I want to set the object inside the component where I loaded the selector.

<div class="col-md-12">
<div class="col-md-4">
<game-selector [customers]="customers" [(selected)]="selectedGameSize" (select)="onItemSelected($event)"></game-selector>
</div>
</div>
<div class="col-md-12" [gameSize]="selectedGameSize">
<div class="col-md-4" *ngIf="gameSize">
{{gameSize | json}}
</div>
</div>


ts file:

@Component({
selector: 'fleet',
templateUrl: 'app/fleet/fleet.html',
directives: [CORE_DIRECTIVES, ROUTER_DIRECTIVES, GameSizeSelector, FactionSelector]
})

export class FleetComponent {
@Output() select = new EventEmitter();
selectedGameSize: GameSize;
constructor() { }

@Input() gameSize: GameSize;

ngOnInit(){
}

onItemSelected(selectedItem: GameSize){
if (this.gameSize == null) {
} else {
console.log("onItemSelected(" + this.gameSize.name + ")");
}
}
}


then i have the selector like this:

@Component({
selector: 'game-selector',
templateUrl: 'app/selector/gameSelector.html',
providers: [GameSizeService]
})

export class GameSizeSelector implements OnInit {
@Output() select: EventEmitter<GameSize> = new EventEmitter();
@Input() games: GameSize[] = [];
@Output() gameSize: GameSize;
@Input() selected: GameSize;

constructor(
private gameService: GameSizeService) {};

getGames() {
this.gameService
.getGameSizes()
.then(games => this.games = games);
}

ngOnInit(){
this.getGames();
if (this.games == null) {
} else {
this.select.emit(this.gameSize);
}
}

}


and the selector.html

<div>
<select (change)="select.next(g)">
<option *ngFor="let g of games" ngValue="g">
{{g.name}}
</option>
</select>
</div>


I tried a lot of stuff but mostly I get the value in this case {{g.name}} oder "[object Object]" as output.

But I want the whole object to be passed to the component.

Any ideas how to get this done?

Kind regards

Answer

ngValue="g" probably doesn't do what you expect. It creates an attribute on <option> with the value '"g"'. To make Angular process it it needs [] or {{}} (string only).

I'm pretty sure you also need to use [(ngModel)] or (ngModelChange) to get the selected value.

   <select [ngModel]="someProp" (ngModelChange)="select.next($event)">
        <option *ngFor="let g of games" [ngValue]="g">
            {{g.name}}
        </option>
    </select>

[ngModel]="someProp" can be omitted. This is only to assign an initial value.