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

发布时间：2020-12-17 18:01:06 所属栏目：安全来源：网络整理

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

我有一个包含两个属性(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>

解决方法

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

您正在使用[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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!