Angular 2中Rxjs Observable的最新问题

Question

您好我正在尝试通过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);
        }
    )
}

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

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