我正在Angular4项目中工作,在此我试图在页面加载时获取系统IP地址并将其传递给API,以便在MSSQL数据库中存储IP地址。在每个页面加载时插入两行显示为“未定义”的IP地址,帮我解决这个问题。
这是我的app.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'];});
答案 0 :(得分:0)
您的问题是您有两个并发的依赖异步调用。
在保存之前,您需要来自freegeoip的IP。所以颠倒你的逻辑,并使用the oncomplete
callback from an Observable subscription。
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);
}
}