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

        這樣就能夠保證屢次打開後都有按鈕，而且有等待的模態框。