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

这是一个

Demo

Answer 2

您应该使用name属性，因为您指向[（ngModel）]中的名称，您应该使用相同的属性绑定到ngValue作为belew

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

更新：如果您想要该类型，那么您应该如下所示

<select class="form-control" name="game" (change)="valueChange()" [(ngModel)]="game" required>
                <option *ngFor="let games of Games" [ngValue]="games" > {{games.name}} </option>
</select>

修改文本框以包含某些名称作为模型

<input type="type" class="form-control" name="type"   [(ngModel)]="someName">

你的方法看起来像

valueChange(games){
    this.someName=this.game.type;
}

LIVE DEMO

Answer 3

在Angular 4中，您可以：

(change)="MyMethod($event.target.value)" 

将选定的值传递给Typescript方法。