The select is not rendering data until the second interaction with him.

<div class="align-items-center">
          <label class="form-label">Select Value</label>
          <div class="input-group">
            <select formControlName="idUsuario" class="form-select" aria-label="Select Value">
              <option value="">-- Value--</option>
              @for (value of valueList; track usuario.id) {
                <option [value]="value .id">{{ value .option}} {{ value .option2}}</option>
              }
            </select>
          </div>

        </div>

The thing is that when the page is loaded the select don’t have any value. I click it first time and still don’t have values. When i move the focus to other part of the page and then click the select for second time, it has the values. What could it be?

Here is the relevant code in the component.

  public valueList: Value[] = [];

  ngOnInit(): void {
    this.valueServie.ggetValues().subscribe((values) => {
      this.valueList = values;
    });
  }