[angular2]select(下拉式菜单)如何设定默认选项，如何显示value而选中的值是key

select(下拉式菜单)如何设定默认选项，如何显示value而选中的值是key

前言

官网甚少提到关于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);
  }
}

还有另一个状况是实际上，常常都是显示在画面给user看到的是文字，但真正送回去db的时候，是用key的方式返回去，不管是新增或是做另外的搜寻功能，那这又得如何做呢

  template: `
    
  
  

    	
   
   
    		
    
    
    		please select
    		
    
    
    		{{item.value}}
    	
    	
   
   
    
  
  
`

假设我想把默认值设定在anson的话呢

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]select(下拉式菜单)如何设定默认选项，如何显示value而选中的值是key