Angular 6 - выбранная по умолчанию опция из выпадающего

Question

Я не нашел многообещающего ответа на мою проблему.Поэтому я спрашиваю что-то подобное.Мне нужно по умолчанию выбрать значение из раскрывающегося списка при загрузке страницы. Этот раскрывающийся список отображается для каждой строки в сетке данных.поэтому у меня есть свои компоненты следующим образом..ts file:

  pwdSelectionItems: any[] = [
      { id: 'CURRENT', name: 'CURRENT' },
      { id: 'FUTURE', name: 'FUTURE' }
    ];

  retrigger(email: CompanyEmailView) {
    let isPwdChoosen = (email.pwdMode === 'CURRENT' || email.pwdMode === 'FUTURE');
    if( !isPwdChoosen ) {
      this.messageService.error('Please select current or future password to retrigger');
    } else {
        this.httpClient.post<any>('/retriggerpasswordemail',
        {id: email.id, emailAddrs: email.emailAddrs, passwordSelection: email.pwdMode }).subscribe(response => {
              this.messageService.success(response.successMessage);
        }, errorResp => {
          if (errorResp.status === 400) {
            this.messageService.error(errorResp.error.errorMessage);
          }
        });
    }
  }

  onPwdChange(pwdsel, email: CompanyEmailView) {
    this.pwdSelection = pwdsel;
    email.pwdMode = pwdsel;
  }

html:

          <select id="choosePwd" name="choosePwd" class="form-control-sm" [(ngModel)]="pwdSelection[$index]"
                  (change)="onPwdChange($event.target.value, entry)">
            <option *ngFor="let mode of pwdSelectionItems" [value]="mode.id"
                    [disabled]="mode.id=='FUTURE' && !(enableFuturePassword && entry.pswdExpiry <= expiryDate)">{{mode.name}}</option>
          </select>
        </td>

Примечание. Я ничего не инициализирую при загрузке страницы.

Решенные проблемы: Выбор параметра в первой строкезаполняет то же значение во всех других строках - изменена модель на строку [] и разрешена.pwdSelection: string[] = []; и используется [(ngModel)]="pwdSelection[$index] в <select

Проблемы:

1. В раскрывающемся списке значение по умолчанию отображается пустым.Нужна опция "CURRENT", чтобы она была выбрана по умолчанию.

2. есть ли способ двухстороннего связывания модели без использования (change)="onPwdChange($event.target.value, entry)

Спасибо запомощь.

Answer 1

Если вы хотите выбрать значение по умолчанию в раскрывающемся списке, вам необходимо привязать значение по умолчанию к вашему [(ngModel)].Например, в вашем примере значение pwdSelection[$index] должно быть равно 'CURRENT'.Это единственный возможный способ.

В противном случае вы можете оставить дополнительную опцию, например;

<option value=undefined> ---Please Select--- </option>
<option *ngFor="let mode of pwdSelectionItems" [value]="mode.id"
                    [disabled]="mode.id=='FUTURE' && !(enableFuturePassword && entry.pswdExpiry <= expiryDate)">{{mode.name}}</option>