无法在 ReactiveForms 中设置默认 select 值，Angular 7

Question

我对 changeDetection 有一些问题，因为 Angular 没有将我的反应控制值更新到下拉视图中。

我已经在一个简单的 StackBlitz example 中重现了完整的问题。

所以基本上我如何强制 Angular 显示 'Argentina' 作为下拉列表中选定的默认选项？

如果有人给我提示如何解决这个问题，我将不胜感激

Answer 1

select 选项列表似乎不包含您尝试 select 的特定数据。

在您的情况下，{ "id": 5, "text": "Argentina" } 也应该是 this.definitions 的一部分。

您可以在声明反应形式之前将该对象推送到 this.definitions，

constructor(private fb: FormBuilder){
  this.definitions.push(this.default);
  this.rootFormGroup = this.fb.group({
    control: this.default
  });

或者，您在编写代码时明确地在 this.definitions 中包含该对象。

definitions = [
    {
      "id": 1,
      "text": "Poland"
    },
    {
      "id": 2,
      "text": "UK"
    },
    {
      "id": 3,
      "text": "Germany"
    },
    {
      "id": 4,
      "text": "France"
    },
    { 
      "id": 5, 
      "text": "Argentina" 
    }

  ]

Answer 2

您必须在要绑定到 select 标记的定义数组中包含 { "id": 5, "text": "Argentina" } 对象。不添加对象就不能绑定值。

definitions = [
    { 
      "id": 5, 
      "text": "Argentina" 
    },
    {
      "id": 1,
      "text": "Poland"
    },
    {
      "id": 2,
      "text": "UK"
    },
    {
      "id": 3,
      "text": "Germany"
    },
    {
      "id": 4,
      "text": "France"
    }
  ]

无法在 ReactiveForms 中设置默认 select 值，Angular 7

Can't set default select value in ReactiveForms , Angular 7

drop-down-menu

angular2-changedetection

angular