javascript - 如何使用 Angular2 和 TypeScript 使选定的下拉值在更改时显示在标题上

Question

我有一个下拉字段，如果我点击汽车，它必须使用 angular2 在标题旁边显示“汽车”。谁能帮我解决这个问题。

HTML:

<h1>Heading <span *ngFor= "let apps of apps">({{apps.name}})</span></h1>
       <div class="form-group">
        <select class="box">
         <option *ngFor= "let apps of apps" >{{apps.name}}</option>
        </select>  
        </div>

ts:

this.apps = [
        { "name": "car" },
        { "name": "bike" }
   ];

Answer 1

<h1> Heading {{appName}}</h1>
<select type="number" [(ngModel)]="appName" >
  <option *ngFor="let app of apps" [ngValue]="app.name">{{app.name}}</option>
</select>

检查这个Demo