Невозможно установить параметр, выбранный по умолчанию в angular 10

Question

Я перепробовал все доступные решения и не смог заставить эту простую вещь работать.

Это мой ts-файл.

options = [
    { value: '', label: 'Age group' },
    { value: '2-3', label: '2 to 3 years' },
    { value: '3-4', label: '3 to 4 years' },
    { value: '4-6', label: '4 to 6 years' },
    { value: '6-8', label: '6 to 8 years' },
    { value: '8-12', label: '8 to 12 years' },
  ];

  selectedValue: any = "6-8";

Вот мой HTML

<"form-inline waves-light ml-auto d-lg-none d-sm-flex" mdbWavesEffect>
   <div class="md-form my-0">
      <select class="browser-default custom-select" name="ageGroup" [(ngModel)]="selectedValue">
        <option value={{option.value}} *ngFor="let option of options">
            {{option.label}}
        </option>
      </select>
   </div>
</form>

Вот предварительный просмотр вывода. Предварительный просмотр вывода

Это выбор последней опции, независимо от того, какой метод я использую.

Answer 1

Используйте [value]="option.id" вместо value="{{ option.id }}" в опции mat

Html:

  <mat-select [(ngModel)]="selectedValue">
    <mat-option *ngFor="let option of options" [value]="option.id">{{ option.name }} 
    </mat-option>
  </mat-select>

Ts:

 selectedValue = this.options[4].id;

Answer 2

Попробуйте этот код,

<select id="duration" name="duration" [(ngModel)]="selectedValue">
  <option *ngFor="let duration of options" [ngValue]="duration.value"> 
        {{ duration.label }}
  </option>
</select>

STACKBLITZ DEMO