[Angular2]選択した値と値を表示する方法を、デフォルトのオプションを設定する方法（ドロップダウンメニュー）を選択することが鍵であります

選択した値と値を表示することが鍵となりますどのように、デフォルトのオプションを設定するには、どのように選択します（ドロップダウンメニュー）

序文

そのレコードに関する記事を書くために、いくつかの特別な要件の独自のドロップダウンメニューの実践のいくつかについての公式ウェブサイトのHTML少し言及し、。

例

どのようにデフォルト値を与えるために、そして選択されていない場合は、状態がそれによって検証されていません？次の例を参考にしてくださいを

import { Component } from '@angular/core';
import { NgForm } from "@angular/forms/src/directives";


@Component({
  selector: 'app-root',
  template: `
    
  
  

    	
   
   
    		
    
    
    		please select
    		{{item.value}}
    	
    	
   
   
    
  
  
`,
})
export class AppComponent {
  modelValue = ''; //绑定ngModel的部分
  list = [ //下拉菜单的值
    { key: 1, value: 'anson' },
    { key: 2, value: 'jacky' },
    { key: 3, value: 'andy' },
  ]
  constructor() {
  }

  submit(form1: NgForm) {
    console.log(form1.valid, form1.value);
  }
}

そこ別の状況は、実際には、多くの場合、ユーザーがテキストとして見ていると、画面上に表示されているが、リアルタイムDBを返送するためには、それが新しいものであるかどうか、戻ったり別の検索を行うために重要な方法です。 、これはそれを行う方法であることをもう一度

  template: `
    
  
  

    	
   
   
    		
    
    
    		please select
    		
    
    
    		{{item.value}}
    	
    	
   
   
    
  
  
`

私はそれアンソン場合は、デフォルト値を設定するとします

import { Component } from '@angular/core';
import { NgForm } from "@angular/forms/src/directives";


@Component({
  selector: 'app-root',
  template: `
    
  
  

    	
   
   
    		
    
    
    		please select
    		
    
    
    		{{item.value}}
    	
    	
   
   
    
  
  
`,
})
export class AppComponent {
  modelValue: number; //绑定ngModel的部分
  list = [ //下拉菜单的值
    { key: 1, value: 'anson' },
    { key: 2, value: 'jacky' },
    { key: 3, value: 'andy' },
  ]
  title: string;
  constructor() {
    const selectedItem = this.list.filter(x => x.key === 1)[0]; //自己用filter的方式把值选给绑定的变量
    this.modelValue = selectedItem.key; //因为目前绑定的值是key，所以必须为key值哦
  }

  submit(form1: NgForm) {
    console.log(form1.valid, form1.value);
  }
}

結論

単純にドロップダウンメニューを実践ものを記録。

オリジナル：大列は  [angular2]選択した値と値を表示する方法を、デフォルトのオプションを設定する方法（ドロップダウンメニュー）を選択することが鍵であります