Невозможно заполнить выпадающий список в динамически сгенерированном виде в angular 7 - PullRequest
Новая
       2

Невозможно заполнить выпадающий список в динамически сгенерированном виде в angular 7

1 голос
/ 08 февраля 2020

Я пытаюсь заполнить выпадающий список после того, как форма сгенерирована через JSON. К сожалению, данные не отображаются в раскрывающемся списке.

HTML - 

<div *ngFor="let element of formTemplate?.controls">
    <div [ngSwitch]="element.type">
        <div *ngSwitchCase="'text'">
             <mat-form-field>
                <input matInput type="text" placeholder="{{element.label}}" formControlName="{{element.field_name}}" />     
             </mat-form-field>
        </div>


        <div *ngSwitchCase="'select'">
             <mat-form-field>
                  <mat-label>{{element.label}}</mat-label>
                       <mat-select formControlName="{{element.field_name}}">
                          <mat-option *ngFor="let option of element.options" [value]="option">
                               {{option}}
                          </mat-option>
                       </mat-select>
              </mat-form-field>
        </div>

    </div>
</div>

TS - 

this.formTemplate = {
    "controls": [{
      "type": "text",
      "label": "First Name",
      "required": true,
      "field_name": "first_name"
    },
    {
      "type": "select",
      "label": "Country",
      "required": false,
      "field_name": "country",
      "options": this.countryNameArr
    }]
};

let group = {};    
this.formTemplate['controls'].forEach(input_template=>{
  group[input_template.field_name]=new FormControl('');  
});
this.popupForm = new FormGroup(group);

//POPULATING DATA HERE
this.countryNameArr = ['India', 'USA', 'Germany', 'Australia'];

Данные в countryNameArr не отражаются в пользовательский интерфейс. Есть несколько условий, когда мне нужно заполнить данные после создания группы форм. Как мне этого добиться?

Это демонстрация стекаблиц - https://stackblitz.com/edit/angular-nmkwac

...