Tengo una tabla de base de datos con dos atributos (Name_of_Game y Type_of_Game). He tenido que extraer Name_of_Game en una lista desplegable seleccionada. Pero esto es lo que quiero hacer ahora. Después de seleccionar el juego de la lista desplegable, ¿cómo se puede configurar automáticamente la entrada de tipo al tipo respectivo del juego?
Ejemplo
Juego
señor de los Anillos
Escribe
Aventura
Después de seleccionar El señor de los anillos de la lista desplegable, el cuadro de entrada de tipo debe establecerse automáticamente en Aventura.
//Component export class ChatComponent{ Game : Games []; constructor(private http:HttpService){ // list all games into the dropdown list this.http.listgames() .subscribe(data => { this.Games = data; }) } //html <div class="form-group"> <select class="form-control" name="game" [(ngModel)]="game.name" required> <option *ngFor="let games of Games" [ngValue]="games" > {{games.name}} </option> </select> </div> <div class="form-group"> <label for="type">Type:</label> <input type="type" class="form-control" name="type" [(ngModel)]="game.type"> </div>Mire la convención de nomenclatura, he cambiado un poco los nombres en mi ejemplo, para reflejar más las minúsculas/mayúsculas que solemos usar;)
Está en el camino correcto para usar [ngValue] . Haga que su nombre vincule todo el objeto, que luego podemos usar en el tipo, para mostrar el tipo correspondiente. Entonces, creemos una variable en la que almacenaremos el juego elegido cuando el usuario elija un nombre de la lista desplegable aquí, llamémoslo juego selectedGame :
Componente:
selectedGame: Object = {};Modelo:
<select [(ngModel)]="selectedGame" required> <option *ngFor="let game of games" [ngValue]="game">{{game.name}}</option> </select> Ahora hemos vinculado todo el objeto a selectedGame , por lo que el campo de entrada reflejará que realizamos un cambio, ya que usamos selectedGame.type como enlace bidireccional para el campo de entrada. Entonces su plantilla se vería así:
<label>Name:</label> <select [(ngModel)]="selectedGame" required> <option *ngFor="let game of games" [ngValue]="game" > {{game.name}} </option> </select> <label>Type:</label> <input type="type"name="type" [(ngModel)]="selectedGame.type">Aquí está un
Debería usar la propiedad de nombre ya que está apuntando al nombre en [(ngModel)], debe usar la misma propiedad para enlazar con ngValue como se muestra a continuación.
<select class="form-control" name="game" [(ngModel)]="game.name" required> <option *ngFor="let games of Games" [ngValue]="games.name" > {{games.name}} </option> </select>Actualización: si desea el tipo, entonces debería hacer lo siguiente
<select class="form-control" name="game" (change)="valueChange()" [(ngModel)]="game" required> <option *ngFor="let games of Games" [ngValue]="games" > {{games.name}} </option> </select>Modifique su cuadro de texto para que contenga algún nombre como modelo
<input type="type" class="form-control" name="type" [(ngModel)]="someName">Su método parece
valueChange(games){ this.someName=this.game.type; }En Angular 4 puedes hacer:
(change)="MyMethod($event.target.value)"para pasar el valor seleccionado a un método Typescript.