angular2 pass Objekt mit Selektor

Question

Ich habe ein Problem, dass ich kein Objekt an eine Komponente von einem Selektor übergeben kann. Ich weiß nicht, ob das überhaupt möglich ist.

Also was ich will, ist eine Dropdown-Liste mit Objekten aus einem Rest Service abgerufen werden. Dann auf wählen Ich möchte das Objekt in der Komponente, wo ich den Selektor geladen habe.

 <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-Datei:

@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 + ")"); 
     } 
    } 
} 

ich habe dann den Wähler wie folgt aus:

@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);  
     } 
    } 

} 

und die selector.html

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

ich viele Sachen ausprobiert aber meistens bekomme ich in diesem Fall den Wert {{g.name}} oder "[Objekt Objekt]" als Ausgabe.

Aber ich möchte das gesamte Objekt an die Komponente übergeben werden.

Irgendwelche Ideen, wie man das schafft?

Mit freundlichen Grüßen

Answer 1

ngValue="g" wahrscheinlich nicht tut, was Sie erwarten. Es erstellt ein Attribut auf <option> mit dem Wert '"g"'. Um es eckig zu verarbeiten, benötigt es [] oder {{}} (nur String).

Ich bin mir ziemlich sicher, dass Sie auch [(ngModel)] oder (ngModelChange) verwenden müssen, um den ausgewählten Wert zu erhalten.

[ngModel]="someProp" kann weggelassen werden. Dies ist nur um einen Anfangswert zuzuweisen.