Angular 2 最新版本中 Rxjs Observable 的问题答案

【问题标题】：Issue with Rxjs Observable in Angular 2 LatestAngular 2 最新版本中 Rxjs Observable 的问题
【发布时间】：2017-03-14 10:22:24
【问题描述】：

您好，我正在尝试通过 Observable 回调更新 signinText var。我在 console.log 中接收数据，但 HTML 中的数据没有改变。 this.fadeInputs()回调成功但数据没有更新。

组件

import {Component, OnInit} from '@angular/core';
import {UserService} from "../services/user.service";
import {Observable} from "rxjs";
import {RequestUpload} from "../_Class/RequestUpload";
let request = require('request');

@Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css'],
    providers: [UserService]
})
export class LoginComponent implements OnInit {

    fade: boolean = false;
    signinText: string;

    constructor(private userService: UserService) {

    }

    ngOnInit() {
        this.fadeInputs(true);
        this.call('login/get','POST',{mobile:9000000000,password:1234},[],false).subscribe(
            (value) => {
                console.log(value);
                this.fadeInputs(false);
            },
            (err) => {
                console.log(err);
                this.fadeInputs(false);
            },
            () => {
                this.fadeInputs(false);
            }
        );
    }

    fadeInputs(fadeType: boolean) {
        console.log("Working");
        this.fade = fadeType;
        this.signinText = !this.fade ? "Sign In" : "Please Wait!";
    }


    private call(url: string, type: string, postData: {}, files: string[], cache: boolean) {
        url = "http://192.168.40.136:146/" + url;

        var RequestConfig = {};
        RequestConfig['method'] = type;
        RequestConfig['url'] = url;
        RequestConfig['auth'] = {
            'user': "admin",
            'pass': "1234"
        };

        let CheckFileSize = 0;
        if (type == "POST") {
            if (files.length > 0) {
                if (postData == null) {
                    postData = {};
                }
                let i = 0;
                for (let file of files) {
                    postData['file_' + i] = fs.createReadStream(file);
                    i++;
                    CheckFileSize += fs.statSync(file).size;
                }
            }
            if (postData != null) {
                RequestConfig['formData'] = postData;
            }
        }
        return Observable.create((observer) => {
            let r = request(RequestConfig, (error, response, body) => {
                if (error || response.statusCode != 200) {
                    observer.error({
                        error: error,
                        response: response,
                    });
                } else {
                    observer.next({response: response, body: body});
                    observer.complete()
                }
            }).on('drain', () => {
                observer.next({upload: new RequestUpload(r.req.connection.bytesWritten, CheckFileSize)});
            });
        })
    }

}

我尝试了下面的代码及其工作。不知道“请求”模块有什么问题

以下代码运行良好。

ngOnInit() {
    this.fadeInputs(true);
    Observable.create((observer) => {
        setInterval(() => {
            observer.next('check')
        }, 1000)
    }).subscribe(
        (value) => {
            this.fadeInputs(!this.fade);
        }
    )
}

【问题讨论】：

我不知道 request() 到底在做什么，但它可能会离开 Angulars 区域。尝试注入private zone:NgZone并包装回调代码（if(error || ...) with this.zone.run(/* 回调代码在这里*/);`
哦，谢谢它有效，... @GünterZöchbauer

标签： angular rxjs electron observable

【解决方案1】：

请求模块正在其他区域上运行。所以需要将它包裹到角度区域。

使用：

this.zone.run(() => {
// Your Code Here
})

感谢@GünterZöchbauer

constructor(private userService: UserService, private zone: NgZone) {

}

return Observable.create((observer) => {
    let r = request(RequestConfig, (error, response, body) => {
        this.zone.run(() => {
            if (error || response.statusCode != 200) {
                observer.error({
                    error: error,
                    response: response,
                });
            } else {
                observer.next({response: response, body: body});
                observer.complete()
            }
        })
    }).on('drain', () => {
        this.zone.run(() => {
            observer.next({upload: new RequestUpload(r.req.connection.bytesWritten, CheckFileSize)});
        })
    });
})

【讨论】：

【解决方案2】：

request() 似乎以某种方式离开了 Angulars 区域（这发生在使用未由 zone.js 修补的异步 API 时）。

使用zone.run(...) 可以将执行带回 Angulars 区域，Angular 将再次知道何时运行更改检测。

constructor(private zone:NgZone) { }

call(...) {
    return Observable.create((observer) => {
        let r = request(RequestConfig, (error, response, body) => {
          this.zone.run(() => {
            if (error || response.statusCode != 200) {
                observer.error({
                    error: error,
                    response: response,
                });
            } else {
                observer.next({response: response, body: body});
                observer.complete()
            }
          });
        }).on('drain', () => {
            observer.next({upload: new RequestUpload(r.req.connection.bytesWritten, CheckFileSize)});
        });
    })
}

【讨论】：