Problem mit Rxjs Observable in Angular 2 Neueste

Question

Hallo, ich versuche Update signinTextvar durch den Observable Callback. Ich erhalte Daten in console.log, aber die Daten ändern sich nicht in HTML. this.fadeInputs() Rückruf ist erfolgreich, aber Daten werden nicht aktualisiert.

Komponente

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

} 

und ich versuchte, unter Code und seine Arbeiten. weiß nicht, was ist falsch in "Anfrage" Modul

unten Code funktioniert gut.

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

Answer 1

Das Anforderungsmodul wird in einer anderen Zone ausgeführt. Also müssen Sie es in die Winkelzone einwickeln.

USE:

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

Dank @ 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

Es scheint request() verlässt irgendwie winkelförmigen Stangen Zone (dies geschieht, wenn Asynchron-API verwendet wird, das nicht durch gepatcht zone.js).

Mit zone.run(...) kann die Ausführung wieder in die Angulars-Zone gebracht werden und Angular weiß erneut, wann die Änderungserkennung ausgeführt werden soll.