Javascript 角度默认值下拉列表值双向限制

我在Angular中有一个下拉列表，它是一个双向绑定表单控件。当窗体加载时，我只想在绑定值上设置一个默认值，以便在下拉列表中显示该值。当我更改下拉列表中的值并打印到控制台时，我看到绑定是正确的。但是，第一次加载默认值时，默认值不会显示在下拉列表中（未预选）。在本示例中，当表单加载时，“cow”应该是默认的选定项，但它不适用于页面加载。请告知代码中的错误

---

以编程方式将值分配给

窗体控件

   ngAfterViewInit(){
    this.animalControl.setValue(this.animals[2]);
    this.animalControl.markAsTouched();
    console.log('FormControl Value: '+JSON.stringify(this.animalControl.value))
  }

Stackblitz

---

修订版

使用

ngModel

和

FormControl

已被取消，并从Angular 7中删除。。。您应该开始习惯从FormControl访问值

console.log('FormControl Value: '+JSON.stringify(this.animalControl.value))

由于一些原因，这一点已被弃用。首先，开发人员 发现这种模式令人困惑。它看起来像是真正的NGF模型 正在使用指令，但实际上它是一个输入/输出属性 在反应形式指令上命名为ngModel，该指令仅近似于 （一些）它的行为。具体来说，它允许获取/设置 值和拦截值事件。然而，ngModel的一些其他 功能-如使用NGModelOptions延迟更新或导出 指令-根本不起作用，这造成了一些问题，这是可以理解的 混乱

此外，该模式混合了模板驱动和反应式表单 策略，我们通常不推荐，因为它不需要 任何一种策略的全部好处的优势。设置值 在模板中，违反了后面的模板不可知原则 被动表单，而在 类删除了在模板中定义表单的便利性

要在v7之前更新代码，您需要决定是否坚持 使用反应式表单指令（并使用反应式表单获取/设置值 模式）或切换到模板驱动的指令

---

当我把[（价值）]改为[（ngModel）]时，它也起了作用，现在我开始琢磨到底有什么不同。将谷歌看看我是否找到信息。感谢[（ngModel）]我所做的更改是在我真正的代码中，而不是在这里使用的示例。该绑定变量类似于Customer.ZipCode..请参阅修订版以获得更详细的答案。