将 Observable<Object> 转换为字符串

Question

我找到了获取 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); } );

返回控制台中的 IP 对象

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

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

Answer 1

如果要将 IP 地址输出到控制台，则只能在值“到达”后执行：this.visitorService.getIpAddress().subscribe(ip => {&nbsp; &nbsp; console.log(ip);&nbsp; &nbsp; this.ipAdress = ip;});

Answer 2

只需使用所需的属性，处理错误是一种很好的做法。您可以通过使用查看可用的属性console.log()- 它会显示您的属性：console.log(this.visitorService.getIpAddress()&nbsp; &nbsp; .subscribe(ip => {&nbsp; &nbsp; &nbsp; &nbsp; console.log(`your ip`, ip);&nbsp; &nbsp; &nbsp; &nbsp; this.ipAdress = ip['yourProperty'];&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; err => {&nbsp; &nbsp; &nbsp; &nbsp; console.log(err);&nbsp; &nbsp; });更新：你的代码对我来说看起来不错。但是，可以通过pipe只使用一次的方法来改进它。pipe方法用于链接方法：login(username: string, password: string): Observable<User> {&nbsp; &nbsp; // der globale interceptor (jwt) hängt halt auch&nbsp;&nbsp; &nbsp; // hier das authorization header feld hinzu; macht nichts&nbsp; &nbsp; return this.http.post<UserRaw>(&nbsp; &nbsp; &nbsp; `${environment.apiUrl}/login`, { username, password } )&nbsp; &nbsp; &nbsp; .pipe(map(userRaw => UserFactory.fromRaw(userRaw)),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; map(user => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// local storage = client persistence (user bleibt eingeloggt)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;localStorage.setItem('currentUser', JSON.stringify(user));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;this.currentUserSubject.next(user);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// console.log(user.username);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;return user;&nbsp; &nbsp; &nbsp; }));您可以在Angular 2 样式指南中阅读更多内容