如何在 Angular 4 中加载页面时获取 IP 地址

Question

我正在一个Angular4项目中工作，在这个项目中我正在尝试在页面加载时获取系统IP地址并将其传递给API以将IP地址存储在MSSQL数据库中。每次页面加载时插入两行，IP地址显示为"未定义"，帮助我解决这个问题。

这是我的应用程序.component.ts代码

import {Component, OnInit} from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{   
  publicIP;
  res;
  constructor(private http: HttpClient) {}
  ngOnInit() : void
  {
    this.getip();
    this.http.get("http://localhost:57036/api/data/GetClientIp/?
    IP_Address="+this.publicIP).subscribe(data=>{
    this.res=data as string[]});
  }
getip()
{
  this.http.get('http://freegeoip.net/json/?callback').subscribe(data => {
  this.publicIP=data['ip'];});
}
}

我在数据中获得了 IP 地址，但在将值分配给 PublicIP 时，它显示为"未定义">

this.http.get('http://freegeoip.net/json/?callback').subscribe(data => {
this.publicIP=data['ip'];});

Answer 1

您的问题是您有两个并发的相关异步调用。

您需要来自 freegeoip 的 IP，然后才能保存它。因此，反转您的逻辑，并利用来自可观察订阅的oncomplete回调。

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
    publicIP: string;
    res: string;
    constructor(private http: HttpClient) {}
    ngOnInit() {
        this.http.get('http://freegeoip.net/json/?callback')
                 .subscribe(
                    data => this.publicIP = data['ip'], // Data from REST
                    error => console.error(error),      // Error callback
                    () => this.saveIP()                 // Once this call completes
                 );
    }
     saveIP() {
        this.http.get(`http://localhost:57036/api/data/GetClientIp/?IP_Address=${this.publicIP}`)
                 .subscribe(data => this.res = data);
    }
}

但是你不需要保存所有这些状态，你可以从功能上做到这一点，只使用onnext回调：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
    constructor(private http: HttpClient) {}
    ngOnInit() {
        this.http.get('http://freegeoip.net/json/?callback')
                 .subscribe(
                    data => this.saveIP(data['ip']),
                    error => console.error(error)
                 );
    }
     saveIP(address: string) {
        this.http.get(`http://localhost:57036/api/data/GetClientIp/?IP_Address=${address}`)
                 .subscribe(data => this.res = data);
    }
}