结合 ngModel 设置默认（选择）选项

Question

我有一个包含 select 的组件。

选项使用@Input 设置并与 ngModel 绑定。 但是我不能用这个组合设置默认值。

我的组件：

export class someComponent {
  @input() options: any[];
  @Input() selectedOption: any;
  @Output() optionChanged = new EventEmitter<any>();

  onOptionChanged() {
    this.optionChanged.emit(this.selectedOption);
  }
}

HTML：

<select *ngIf="options" [(ngModel)]="selectedOption" (change)="onOptionChange_select(selectedOption)">
  <option selected disabled>Select an option</option>
  <option *ngFor="let option of options" [value]="option.text">{{option.text}}</option>
</select>

afterviewInit 不起作用，并且设置第一个选项的值对我也不起作用。

第一个选项不绑定

我想设置加载时选择的第一个选项。 使用此代码，加载组件时不会选择任何选项。

选项输入如下：

[{id：'1'，文本：'option1'}，{id：'2'，文本：'option2'}]

Answer 1

利用ngOnChanges ，这将在每次父值更改时默认值。

ngOnChanges(change: SimpleChanges){
  if(change['options']){
     this.selectedOption = 'Select an option';
   }
 }

或者使用 ngOnInit

ngOnInit(): void {
  this.selectedOption = 'Select an option';
}

Answer 2

您已默认选择“选择一个选项” 。

<option selected disabled>Select an option</option>

请删除此选定的属性或在此添加条件

<option [selected]="!selectedOption" disabled>Select an option</option>