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

【问题标题】：Set a default (select) option in combination with ngModel结合 ngModel 设置默认（选择）选项
【发布时间】：2021-06-02 21:03:49
【问题描述】：

我有一个包含选择的组件。

这些选项使用@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', text: 'option1'}, {id: '2', text: 'option2'}]

【问题讨论】：

你被默认选中 "选择一个选项" 请删除选中的默认值然后检查我认为它对你有用

标签： html angular typescript 2-way-object-databinding

【解决方案1】：

使用ngOnChanges，这将在每次Parent中的值更改时默认值。

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

或者使用 ngOnInit

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

【讨论】：

默认/第一个选项不在选项数组中，正如您在 html 中看到的那样，我试图从它的父级传递值。没用。
更新了我的答案，在这种情况下你不需要使用 ngOnChages，ngOnInit 也可以正常工作。
我还需要将值更改为 ngValue 以传递对象。谢谢

【解决方案2】：

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

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

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

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

【讨论】：

当您选择另一个选项时，所选内容将被更改/删除。“ngModel”不会随此更改而更新