angular的subscribe

发布时间：2020-12-17 07:04:22 所属栏目：安全来源：网络整理

导读：angular中可以使用observable和subscribe实现订阅，从而实现异步。这里记录一个工作中的小问题，以加深对subscribe的理解。前端技能弱，慢慢积累中。本来希望的是点击一个按钮后出现一个loading的模态框，实际发现并没有出现loading的模态框。按钮和模态

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!