Не удается установить значение выбора по умолчанию в ReactiveForms, Angular 7

Question

У меня есть некоторая проблема с changeDetection, так как Angular не обновляет значение моего реактивного контроля в раскрывающемся виде.

Я воспроизвел полную проблему в простом примере StackBlitz .

Так в принципе, как я могу заставить Angular показывать мне «Аргентину» в качестве выбранной опции по умолчанию в раскрывающемся списке?

Был бы очень признателен, если бы кто-нибудь дал мне подсказкукак решить это

Answer 1

Вы должны включить объект { "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"
    }
  ]

Answer 2

Похоже, что список опций выбора не содержит те конкретные данные, которые вы пытаетесь выбрать.

В вашем случае { "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" 
    }

  ]