Angular 6表格行下拉框默认选中CURRENT及双向绑定优化问题

Hey there! Let's work through your two issues step by step—getting the dropdowns to default to CURRENT and eliminating the need for the onPwdChange event handler.

1. Defaulting to the CURRENT Option #

The blank default happens because your selection state wasn't initialized when the page loads. A cleaner approach is to tie the dropdown directly to each row's pwdMode property instead of maintaining a separate pwdSelection array. Here's how to set the default:

When you load your table data (e.g., from an API call), initialize the pwdMode property of each CompanyEmailView object to 'CURRENT':

// Example: When fetching your email data
this.httpClient.get<CompanyEmailView[]>('/your-data-endpoint').subscribe(emails => {
  this.companyEmails = emails;
  // Set default pwdMode for each entry (only if not already defined)
  this.companyEmails.forEach(email => {
    if (!email.pwdMode) {
      email.pwdMode = 'CURRENT';
    }
  });
});

2. Removing the (change) Event for Two-Way Binding #

You can ditch the onPwdChange method entirely by leveraging Angular's built-in two-way binding. Just bind the dropdown directly to entry.pwdMode with [(ngModel)]—Angular will automatically update the pwdMode property whenever the user selects an option, no extra event handler needed.

Update your template like this:

<select id="choosePwd" name="choosePwd" class="form-control-sm" [(ngModel)]="entry.pwdMode">
  <option *ngFor="let mode of pwdSelectionItems" 
          [value]="mode.id" 
          [disabled]="mode.id=='FUTURE' && !(enableFuturePassword && entry.pswdExpiry <= expiryDate)">
    {{mode.name}}
  </option>
</select>

You can also remove the pwdSelection array and onPwdChange method from your component code—they're no longer needed. Your retrigger method will still work perfectly, since it relies on email.pwdMode which now gets updated automatically via the two-way binding.

Quick Validation #

Double-check that your CompanyEmailView interface/class includes the pwdMode property (which it appears to, since you're using it in the retrigger method). This ensures the binding works as expected.

内容的提问来源于stack exchange，提问作者VJay