問題

我沒有找到任何有希望的答案.所以我問類似的事情. 我需要預設從頁面load上的下拉列表中選擇值.這個下拉出現在資料grid中的每一行.所以我的元件如下. .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>
 

注意:我沒有在頁面載入時初始化任何內容.

解決的問題: 在第一行中選擇一個選項填充所有其他行中的相同值 – Changed模型到string []並解析. pwdSelection: string[] = [];並在<select中使用[(ngModel)]="pwdSelection[$index]

問題:

  1. 下拉列表顯示預設值為空白.需要預設選擇“CURRENT”選項.

  2. 有沒有辦法我可以兩種方法繫結模型而不使用(change)="onPwdChange($event.target.value, entry)

謝謝你的幫助.

  最佳答案

如果您想在下拉列表中預設選擇一個值,則需要在您的[(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>
 

  相同標籤的其他問題

angularangular6