使用 ngModel 和 name 属性时，Angular2 选择默认值不起作用

Question

<select id="role" name="role" class="form-control" [(ngModel)]="user.role" #role="ngModel" required>
    <option value="" >Select</option>
    <option value="leadAnalyst">Lead Analyst</option>
    <option value="analyst">Analyst</option>
    <option value="assistant">Assistant</option>
</select>

user-create.component.ts

ngOnInit() {
  this.user.role = 'Select';
}

I have tried using above code but its not working.

Answer 1

You need to define user as a object and then assign the value for the role,

export class AppComponent {
  defaultStr = 'Select';
  user = { role: this.defaultStr };

  constructor() { console.clear(); }
  getvalue(){
    console.log(this.user.role);
  }
}

WORKING DEMO

Answer 2

Change your code to :

ngOnInit() {
        this.user.role = '';
    }

Answer 3

For selecting the default value you need to use selected property of angular

 <select id="role" name="role" class="form-control"  #role="ngModel" required>
    <option value="" >Select</option>
    <option value="leadAnalyst" [selected]="'leadAnalyst' == user.role">Lead Analyst</option>
    <option value="analyst" [selected]="'Analyst' == user.role">Analyst</option>
    <option value="assistant" [selected]="'assistant' == user.role">Assistant</option>
</select>

"User.role" should return the role of user in ngOnInit()