angular中可以使用observable和subscribe實現訂閱,從而實現異步。
這里記錄一個工作中的小問題,以加深對subscribe的理解。前端技能弱,慢慢積累中。
本來希望的是點擊一個按鈕后出現一個loading的模態框,實際發現並沒有出現loading的模態框。
按鈕和模態框的代碼,點擊刪除按鈕后,出現模態框,刪除按鈕消失
<div *ngIf = "rotateState === 0">
loading 模態框
</div>
<div *ngIf = "rotateState === 1">
<button (click) = "delete()">刪除</button>
</div>
delete方法的代碼:
delete(id: any){ this.rotateState =0; this.deleteInterface(id).subscribe(res =>{ ... },error=>{ ... }) }
deleteInterface是調用后台restful接口的一個方法,返回的是一個observable對象。
測試發現第一次刪除是好的,有模態框顯示,但是后來就不會出現刪除按鈕了,於是在代碼的最后加上了this.rotateState =1;
delete(id: any){ this.rotateState =0; this.deleteInterface(id).subscribe(res =>{ ... },error=>{ ... }) this.rotateState =1; }
這樣每次點開有刪除按鈕,模態框卻沒有了。
observable和subscribe是異步的,點擊按鈕觸發delete方法后,不會等待restful的調用,執行this.rotateState =1就不會顯示等待的模態框了。
delete(id: any){ this.rotateState =0; this.deleteInterface(id).subscribe(res =>{ ... this.rotateState =1; },error=>{ ... this.rotateState =1; }) }
這樣就可以保證多次打開后都有按鈕,並且有等待的模態框。