Angular2 下拉菜單恢復為之前選擇的選項

Question

我有這個簡單的 HTML 選擇來在 Angular2 (TS) 中實現下拉菜單，如下所示

<select id="pageSize" (change)="onPageSizeChanged($event, pagination.pageSize)">
  <option value="10">10</option>
  <option value="20">20</option>
  <option value="50">50</option>
</select>

先前選擇的值保存在pagination.pageSize變量中。 在改變這一點時，我想打開一個對話框並等待用戶響應。 如果用戶單擊取消，我想將選擇恢復為以前選擇的選項。

onPageSizeChanged(event, oldValue) {
  const response = window.confirm("Are you sure you want change the page size? Your edits will be lost?");
  if (response) {
    //... some code ...
  } else {
    //... here I want to revert the selection to previously selected option
  }
}

嘗試了很多不同的事情，但沒有運氣。

請幫忙，我對這個簡單的事情失去了理智。 我一定是在做蠢事。

---

嘗試 #1 - 沒有用（Plunk - https://embed.plnkr.co/ILi12O/ ）

<select id="pageSize" [ngModel]="pageSize" (ngModelChange)="onPageSizeChanged($event, pagination.pageSize)"> 
  <option value="10">10</option> 
  <option value="20">20</option> 
  <option value="50">50</option> 
</select> 

onPageSizeChanged(event, oldValue) { 
  const response = window.confirm("Are you sure you want change the page size? Your edits will be lost?"); 
  if (response) { //go ahead so something } 
  else { this.pageSize = oldValue; }  
} 

Answer 1

添加ngModelChange以跟蹤模型更改。 如果對話框確認下一次更改，則保留更改，否則設置回值。 局部模板變量 (#select) 使跟蹤更容易一些。 我根據您的 plunker 進行了更改：

HTML :

 <select #select id="pageSize" [ngModel]="pageSize" (ngModelChange)="select.value = onPageSizeChanged($event)"> 

打字稿：

   onPageSizeChanged(event) { 
   const response = window.confirm("Are you sure you want change the page size? Your edits will be lost?"); 
    console.log(this.pagination.pageSize)
    if (response) { 
      this.pageSize = event;
      this.pagination.pageSize = event;
    }
    else{
      this.pageSize = this.pagination.pageSize;
    }
    return this.pagination.pageSize;
  } 

演示

Answer 2

https://plnkr.co/edit/RR8XgZW2KIcYTnxo7Iju?p=preview

你可以在你的 component.html 文件中做這樣的事情......

在您的選擇元素上添加模板引用變量#pageSize

並在 (change) 上，將該變量的值 (pageSize.value) 設置為等於我們接下來將創建的 onChangeSize 方法。 將 pageSize.value 傳遞給這個 onChangeSize 方法，如下所示： (change) = "pageSize.value = onChangeSize(pageSize.value)

這給了我們...

<select id="pageSize" #pageSize 
(change)="pageSize.value = onChangeSize(pageSize.value)">
  <option value="10">10</option>
  <option value="20">20</option>
  <option value="50">50</option>
</select>    

並在您的 component.ts 文件中，創建一個接受該值的方法，如果用戶確認更改，我們只需立即返回該值。 如果用戶拒絕更改，我們將返回默認值。

export class MathComponent implements OnInit {
  defaultInput: number = 10;
  userInput: number = this.defaultInput;

  constructor() { }

  ngOnInit() {
  }

  onChangeSize(pageSize: HTMLSelectElement) {
    const response = window.confirm("Are you sure you want change the page size? Your edits will be lost?");
    if (response) {
      return pageSize;
    } else {
      return this.defaultInput;
    }
  }
}

https://plnkr.co/edit/RR8XgZW2KIcYTnxo7Iju?p=preview

Answer 3

對於(ngModelChange)方法包含異步代碼（async/await、Promise、rxjs Observable）的 Select 控件，Angular 6 之前的代碼可能會使用以下解決方案。

      <select
        id="{{ user.emailAddress }}"
        class="form-control role-select"
        aria-label="Dropdown"
        [disabled]="busy"
        [(ngModel)]="user.role"
        (ngModelChange)="editUserRole(user)"
      >
        <option *ngFor="let role of (roles | async)" [value]="role">
          {{ role }}
        </option>
      </select>

在控制器中

public async editUserRole(user: IUser) {
    if (user.role === SubscriptionUserRole.DATA_DEFAULT && !this._hasAtLeastOneOtherAdmin(user)) {
      // Execute on the next app.tick cycle. Pre V6, the HTML Element value is not updated until after ngModelChange.
      // This may not be needed in Angular V6.
      // zone.js and ngZone intercept async operations to trigger UI updates.  Hence, no need to call app.tick.
      setTimeout(() => {
        user.role = SubscriptionUserRole.DATA_ADMIN;
      }, 0);
      this.errorMessage = 'At least one user should be DataAdmin';
      return;
    }
    // Continue change operation like database update here.
}

我想在某些情況下，延遲更新可能會造成問題。

由於在 ngModelChangeCall 之前更新 FormControl 的更改，Angular 6+ 中可能不需要此延遲。