Angular ignores *ngFor in select option

Question

I’m trying to make a field like select in an Angular form with Materialize, and fill it dynamically, but when arriving at the directive *ngFor, Angular now ignores the field:

HTML:

    <!-- campo que não funciona -->
    <div class="input-field col s4">
      <select formControlName="item_id_dinamic">
        <option [ngValue]="" disabled selected>Escolha o item:</option>
        <option *ngFor="let item of itens" [ngValue]="item.id">{{ item.name }}</option>
      </select>
    </div>
    <!-- campo estático funcionando -->
    <div class="input-field col s4">
      <select formControlName="item_id_static">
        <option [ngValue]="" disabled selected>Escolha o banco:</option>
        <option [ngValue]="1">Opção 1</option>
        <option [ngValue]="2">Opção 2</option>
      </select>
    </div>

The result in the presentation of the fields is this:

Use of static form options

Dynamically generated by the application

My Typescript component is mounted this way:

export class FormItensComponent implements OnInit {

  itens: Item[] = ITENS; // puxado array de outra parte da aplicação
  itemForm: FormGroup;

  constructor(
    private formBuilder: FormBuilder
  ){}

  ngOnInit() {
    // usado para inicializar o select com Materialize
    var elems = document.querySelectorAll('select');
    var instances = M.FormSelect.init(elems);
    this.itemForm = this.formBuilder.group({
      item_id_dinamic: ['', Validators.required],
      item_id_static:  ['', Validators.required]
    });
    /* detalhes de leitura de dados do banco omitidas */
  }
}

Example of possible items (JSON):

{
  id: 1,
  name: 'Item 1'
},
{
  id: 2,
  name: 'Item 2'
},
{
  id: 3,
  name: 'Item 3'
},
{
  id: 4,
  name: 'Outro'
}

Answer 1

I noticed a detail in your code, maybe it’s the cause. You declared the form variable itemForm: FormGroup with the name itemForm and initialized as bankAccountForm. I don’t know if it’s two different forms. I moved up an environment for testing assuming itemForm and everything happened normally (before changing the select was blank as in your example).

I made this change to your code:

ngOnInit() {
    this.itemForm = this.formBuilder.group({
      item_id_dinamic: ['', Validators.required],
      item_id_static:  ['', Validators.required]
    });
  }

Link to the stackblitz: https://stackblitz.com/edit/angular-nrifss

Answer 2

Good afternoon friend, there is great chance of the component initialization being in the wrong place the command:

var instances = M.FormSelect.init(elems);

should be executed after the data has already been loaded in select, if you bring the data in a Promise or observable stay tuned to this.