从Angular 2中的选定下拉列表中获取值

Question

我有一个包含两个属性(Name_of_Game和Type_of_Game)的数据库表.我一直在将Name_of_Game提取到选择下拉列表中.但这就是我现在想要做的.从下拉列表中选择游戏后,如何将类型输入自动设置为游戏的相应类型？

例

游戏
指环王

类型

冒险

从下拉列表中选择响铃之后,类型输入框应自动设置为冒险.

    //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>

Answer 1

请看一下命名约定,我在我的例子中更改了一些名称,以更多地反映我们通常使用的低/大写;)

您正在使用正确的轨道[ngValue].让你的名字绑定整个对象,然后我们可以在类型中使用它来显示相应的类型.因此,当用户从下拉列表中选择一个名称时,让我们创建一个存储所选游戏的变量,让我们称之为selectedGame:

零件:

selectedGame: Object = {};

模板:

<select [(ngModel)]="selectedGame" required>
  <option *ngFor="let game of games" [ngValue]="game">{{game.name}}</option>
</select>

现在我们将整个对象绑定到selectedGame,因此输入字段将反映我们进行更改,因为我们使用selectedGame.type输入字段的双向绑定.所以你的模板看起来像这样:

<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">

这是一个

演示