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

用戶創建.component.ts

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

我試過使用上面的代碼，但它不起作用。

Answer 1

您需要將用戶定義為對象，然后為角色分配值，

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

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

WORKING DEMO

Answer 2

將您的代碼更改為：

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

Answer 3

要選擇默認值，您需要使用 angular 的 selected 屬性

 <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" 應該在 ngOnInit() 中返回用戶的角色