Html 奇怪的行为<；选择>；具有ngModel的组件

我正在使用Angular 6开发一个web应用程序。如果我创建一个模拟HTML

的自定义组件，当它被另一个组件引用时，我不能使它具有默认值！ 您可以在以下链接中找到（简单）应用程序代码：

在 我询问了当存在

ngModel

时如何设置默认值(

的

选定的
属性不再工作！）。
如您所见，我的
输入选择
自定义组件
初始化
值
（值链接到ngModel）

但是，不幸的是，组件显示如下：


正如您在控制台中看到的，在按submit时，打印以下内容：


我不希望出现这种情况：我希望有一个带有预选值的组合框。我无法理解这个应用程序的错误所在。
您使用了
ngModel
但没有绑定任何东西，因此Angular不知道它应该绑定什么值。您应该使用包含默认值的
属性
绑定
ngModel

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

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



工作副本在这里-
您使用了
ngModel
，但没有绑定任何东西，因此Angular不知道它应该绑定什么值。您应该使用包含默认值的
属性
绑定
ngModel

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

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



工作副本在这里-