角度6：<select>组件与ngModel的奇怪行为

Question

我正在使用Angular 6开发Web应用程序。我有一个奇怪的问题：如果我创建一个模拟HTML 的自定义组件，当另一个组件引用该组件时，我将无法使其具有默认值！ 您可以在以下链接中找到（简单）应用程序代码：stackblitz此处 在这个问题上 我问当存在ngModel时如何设置默认值（ 的所选属性不再起作用！）。 如您所见，我的输入选择自定义组件 初始化值（链接到ngModel的值）。 值：任何='默认'; 但是，不幸的是，该组件显示如下： 如您所见，在提交时，请按以下步骤打印控制台： 我希望这种情况不会出现：我想要一个带有预选值的组合框。我无法理解此应用程序有什么问题。有人可以帮我吗？

1 个答案:

答案 0 :(得分：4)

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

相关问题

• 在Angular2中将组件与ngModel集成
• 未定义的ngmodel的奇怪问题
• 将ngModel与自定义组件一起使用
• ngModel表演奇怪 - Angular2
• Angular2 ngModel选择
• 使用ngModel的Angular 2组件不起作用
• 自定义组件上的NgModel
• 角度自定义组件ngModel
• 角度6：<select>组件与ngModel的奇怪行为
• 如何在自定义Angular组件中禁用ngModel的默认行为？

最新问题

• 我写了这段代码，但我无法理解我的错误
• 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
• 是否有可能使 loadstring 不可能等于打印？卢阿
• java中的random.expovariate()
• Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
• 为什么我的 Onclick 箭头功能在 React 中不起作用？
• 在此代码中是否有使用“this”的替代方法？
• 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
• 每千个数字得到
• 更新了城市边界 KML 文件的来源？

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