<select> 组件与 ngModel 的奇怪行为

Question

我正在使用 Angular 6 开发 Web 应用程序。如果我创建一个模拟 HTML <select> 的自定义组件，我无法使其具有默认值它被另一个组件引用了！您可以在以下 link 找到（简单的）应用程序代码：stackblitz here

在this question 我问如何在 ngModel 存在时设置默认值（ <option> 的 selected 属性不再起作用！）。如您所见，我的 input-select 自定义组件初始化 value（值 linked 到 ngModel）。

value: any = 'default';

然而不幸的是，组件是这样显示的：

正如您在控制台中看到的那样，在按下提交时，打印如下：

我希望这种情况不要出现：我想要一个带有预选值的组合框。我不明白这个应用程序有什么问题。

Answer 1

您使用了 ngModel 但没有绑定任何东西，所以 Angular 不知道它应该绑定什么值。您应该将 ngModel 与包含默认值的 property 绑定。

<form #form="ngForm" (ngSubmit)="onSubmit(form.value)">
  <input-select
  name="name"
  [options]="my_options"
  [(ngModel)]="value"
  ></input-select>

  <input type="submit" value="Submit"/>
</form>

工作副本在这里 - https://stackblitz.com/edit/angular-qanpuu

<select> 组件与 ngModel 的奇怪行为

Strange behavior of <select> component with ngModel

html

components

html-select

ngmodel

angular6