添加占位符以在angular2中选择标记

我有一个只包含表单的简单组件:

import {Component, FORM_DIRECTIVES, NgFor} from 'angular2/angular2';


@Component({
  selector: 'test-component',
  directives: [FORM_DIRECTIVES, NgFor],
  template: `
    

      

        
          
          {{ server | uppercase }}
          
        
      
      

        
      
    
  `
})
export class TestComponent {
  public model: Model = new Model();
  public servers: string[] = ['a', 'b', 'c'];

  onSubmit(): void {
    // Complicated logic.

    // Reset form.
    this.model.reset();
  }
}

class Model {
  constructor(
    public server: string = ''
  ) { }

  reset(): void {
    this.server = '';
  }
}

我想为我的选择创建"占位符",但是ng-model会覆盖所选属性,导致根本没有选择选项.任何sugestions？我正在使用角度2.0.0-alpha.48.

我通过执行以下操作来实现此目的:

enter code here


  metrics type
  
     --please select--
     {{item.label}}
  
 

然后使用css ng-pristine进行样式设计

select {
 border: 1px solid transparent;
  &.ng-pristine{
    font-style: italic;
    color: darken($white, 50%);
  }
}

Angular 5解决方案和反应形式!

Placeholder text..

:)

Placeholder text..

然后在你的组件中. this.mySelect = -1;

这项工作对我来说

我的答案是基于这个答案 和答案