Как я могу выбрать опцию по умолчанию?

Question

Привет, у меня есть окно выбора в моем угловом интерфейсе.Я заполняю его некоторыми значениями при загрузке компонента.Я хочу сделать первый элемент выбранным по умолчанию, однако этого не происходит.не уверен, что не так с моим кодом.

CdrMessageStatus

export enum CdrMessageStatus {
  ENROUTE = 'ENROUTE',
  DELIVERED = 'DELIVERED',
  EXPIRED = 'EXPIRED',
  UNDELIVERABLE = 'UNDELIVERABLE'
}

MessageHistoryComponent

export class MessageHistoryComponent implements OnInit {

 cdrStatuses = CdrMessageStatus;
 cdrStatusKeys: any[];

  ngOnInit() {

    this.formGroup = this.fb.group({
      range: [ [ ], Validators.required],
      cdrStatus: [],
      msisdn:[''],
      campaign: [],
      inventory: [],
      flight: []
     }
    );

    combineLatest(this.campaignsService.getStatuses(),this.authenticationService.currentUser$, of(this.authenticationService.authority),
                      this.flightsService.getStatuses()
                  ).subscribe(([campaignStatuses,user,authority,flightStatuses]) => {

              this.cdrStatusKeys = Object.keys(this.cdrStatuses);

}

}

message-history.component.html

  <div class="col-2">
      <select class="custom-select" formControlName="cdrStatus">
        <option [value]="" [selected]="selected" disabled>{{ 'LABELS.CDR_STATUS' | translate }}</option>
        <option *ngFor="let key of cdrStatusKeys" [value]="key"> {{ cdrStatuses[key] }} </option>
      </select>
  </div>

также со скриншотом ниже

Я вижу заполненные значения.'ENROUTE', 'DELIVERED', 'EXPIRED', 'UNDELIVERABLE', однако я хочу выбрать элемент по умолчанию

  <option [value]="" [selected]="selected" disabled>{{ 'LABELS.CDR_STATUS' | translate }}</option> 

благодарен за любую помощь

Answer 1

Ваша проблема в том, что для параметра по умолчанию требуется значение, без него оно не отображается как параметр по умолчанию:

<select class="custom-select" formControlName="cdrStatus">
        <option [value]="null" [selected]="selected" disabled>{{ 'LABELS.CDR_STATUS' | translate }}</option>
        <option *ngFor="let key of cdrStatusKeys" [value]="key"> {{ cdrStatuses[key] }} </option>
</select>

Answer 2

Установите первое значение для элемента Select в TS:

this.formGroup.get('cdrStatus').setValue(object);

Answer 3

В настоящее время у вас есть значение = ""

<option [value]=""

Вы можете установить это в первое значение.Жестко закодировано.

<option [value] ='ENROUTE'

Если вы хотите динамический:

Проверьте это: Угловой материал md-select выбранное по умолчанию значение

Вы можете использовать двустороннийпривязка данных:

this.selectedOption = '1';

HTML:

<mat-select [(ngModel)]="selectedOption">
  <mat-option value="1">One</mat-option>
  <mat-option value="2">Two</mat-option>
</mat-select>