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

这样就可以保证多次打开后都有按钮，并且有等待的模态框。