Angular 6 - 从下拉列表中默认选择的选项

Question

我没有为我的问题找到任何有希望的答案。所以我在问类似的事情。我需要默认 select 页面 load.This 下拉列表中的值，数据网格中的每一行都会出现下拉列表。所以我的组件如下。 .ts 文件：


  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[] = []; 并在 <select

中使用了 [(ngModel)]="pwdSelection[$index]

问题：

下拉列表显示默认值为空白。需要 "CURRENT" 选项作为默认值 selected.
有什么方法可以在不使用 (change)="onPwdChange($event.target.value, entry)

感谢您的帮助。

Answer 1

如果您想 select 下拉列表中的默认值，您需要在 [(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>

Angular 6 - 从下拉列表中默认选择的选项

Angular 6 - Default selected option from dropdown

angular

angular6