我有一個回應式表單，其中包含我訂閱的一些欄位。用戶在訂閱的控制元件上輸入一個值，選項卡或點擊欄位外（模糊事件），將發生后端/http 呼叫以獲取一些附加資訊并填充一些其他欄位。
這一切都完美無缺。
當用戶沒有單擊欄位之外而是直接單擊我們的保存按鈕時會出現問題，該按鈕在保存之前啟動邏輯。100 次中有 70 次這也可以正常作業，后端呼叫足夠快以獲取附加資訊，然后開始保存程序，但其他 30 次我們丟失了一些資訊。
當然，我可以做一些手動檢查和驗證器，但我認為必須有一種方法來確保我的所有值更改都沒有掛起并確保它們都已完成。
非常感謝！
uj5u.com熱心網友回復：
您可以在 API 正在進行時禁用該按鈕。
- 維護一個布爾變數并使用tap 運算子更新其switchMap值。在內部使用該運算子進行API 呼叫，一旦完成，禁用布林值。
this.firstName.valueChanges
.pipe(
tap((x) => (this.isLoading = true)),
switchMap(() => {
return of('xxxx').pipe(delay(2000));
}),
tap((x) => (this.isLoading = false))
)
.subscribe((x) => console.log(x));
- 使用布爾變數禁用按鈕
<button [disabled]="isLoading">Submit</button>
通過這種方式，您的按鈕將默認啟用，但是一旦用戶開始在文本框中鍵入內容，按鈕將被禁用，直到 API 回應完成。
演示：- https://stackblitz.com/edit/angular-ivy-khete?file=src/app/app.component.ts
注意：- 已添加延遲以展示作業流程。
uj5u.com熱心網友回復：
如果監聽 valuechanges 對您的用戶體驗很重要，而不是設定一個按鈕讓用戶提交他的更改，則處理起來很棘手。您可以為這個 senario 制作一個開箱即用的 sloution，例如：
JSON.stringify(value)：使值易于跟蹤其更改。
distinictUntilChanged()：不會兩次發出相同的值。
debounceTime(500)：本例中最后一次發射值后需要經過的時間為 500 毫秒。
JSON.parse(value)：將值回傳到原始狀態。
this.form.valuechanges.pipe(
map(value => JSON.stringify(value),
distinictUntilChanged(),
debounceTime(500),
map(value => JSON.parse(value)))
.subscribe(value => {
...Your Code
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/396177.html
標籤：有角的