如何使用 angular2 和打字稿使选定的下拉值在更改时显示在标题上

Question

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

目录：

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

查看此演示

Answer 2

PFB TS 更改

    export class AppComponent  {
      apps:any;
      selectedApp : any;
      constructor(){
this.selectedApp=car;
      this.apps = [
            { "name": "car" },
            { "name": "bike" }
       ];
      }
    }

PFB 的 HTML 更改

<p>
      {{selectedApp}}
    </p>
    <select class="box" [(ngModel)]="selectedApp">
             <option *ngFor= "let app of apps" [value]="app.name">{{app.name}}</option>
            </select>