无法在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

试试这段代码，

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

Answer 2

在mat选项中使用[value]="option.id"而不是value="{{ option.id }}"

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 3

HTML：

  <select id="duration" name="duration" [(ngModel)]="selectedValue">

     <option *ngFor="let duration of options" [ngValue]="duration.value"> 
        {{ duration.label }}
        </option>

 </select>

TypeScript代码：

this.selectedValue = this.options[4].id;