将 Observable<Object> 转换为字符串

Question

我找到了this example 的获取 IP 地址的服务。

此服务返回一个Observable<Object>，我想将其分配/保存到一个字符串变量。

  getIpAddress() {
    return this.http
          .get('https://api.ipify.org/?format=json')
          .pipe(
            catchError(this.handleError)
          );
  }

我仍然没有很好地“训练” Observables。我已将此服务注入到我自己的服务（身份验证服务）中，我试图在其中访问实际值，这将是一个字符串。

我知道我必须订阅和管道/映射才能使用它，但这就是我迷路的地方......

console.log(this.visitorService.getIpAddress().subscribe(ip => this.ipAdress = ip ?? ));

最后，我想在我的登录方法中使用 IP 地址（字符串）（console.log 将被替换，API 收到第三个正文参数）：

  login(username: string, password: string): Observable<User> {
    // der globale interceptor (jwt) hängt halt auch hier das authorization header feld hinzu; macht nichts

    console.log(this.visitorService.getIpAddress().subscribe(ip => this.ipAdress = ip ?? ));

    return this.http.post<UserRaw>(
      `${environment.apiUrl}/login`, { username, password } )
      .pipe(map(userRaw => UserFactory.fromRaw(userRaw)))
      .pipe(map(user => {
        // local storage = client persistence (user bleibt eingeloggt)
        localStorage.setItem('currentUser', JSON.stringify(user));
        this.currentUserSubject.next(user);
        // console.log(user.username);
        return user;
    }));

更新

this.visitorService.getIpAddress().subscribe(ip => { console.log(ip); } );

返回

但之后，我无法访问或转换它：

this.visitorService.getIpAddress().subscribe(ip => { this.ipAdress = ip.ip } );

Answer 1

如果你想将IP地址输出到控制台，你只能在值“到达”时这样做：

this.visitorService.getIpAddress().subscribe(ip => {
    console.log(ip);
    this.ipAdress = ip;
});

Answer 2

只需使用所需的属性，处理错误是一种很好的做法。您可以使用 console.log() 查看可用的属性 - 它会显示您的属性：

console.log(this.visitorService.getIpAddress()
    .subscribe(ip => {
        console.log(`your ip`, ip);
        this.ipAdress = ip['yourProperty'];
        },
    err => {
        console.log(err);
    });

更新：

您的代码对我来说看起来不错。但是，只需使用一次pipe 方法就可以改进它。 pipe方法用于链接方法：

login(username: string, password: string): Observable<User> {
    // der globale interceptor (jwt) hängt halt auch 
    // hier das authorization header feld hinzu; macht nichts

    return this.http.post<UserRaw>(
      `${environment.apiUrl}/login`, { username, password } )
      .pipe(map(userRaw => UserFactory.fromRaw(userRaw)),
            map(user => {
               // local storage = client persistence (user bleibt eingeloggt)
               localStorage.setItem('currentUser', JSON.stringify(user));
               this.currentUserSubject.next(user);
               // console.log(user.username);
               return user;
      }));

您可以在Angular 2 Style Guide阅读更多内容