angular的subscribe


  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;  
       })      
}

        這樣就可以保證多次打開后都有按鈕,並且有等待的模態框。

 

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM