Angular 从http获取数字

有人能帮我从Angular 5中的http响应中获取数字吗？我现在不知道该怎么做，我在网上搜索，但我的头发长得很快，所以这对我没有帮助。谢谢你的帮助

我的代码：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { User } from '../entities/User';

@Injectable()
export class UserService {

  private usersurl: 'http://localhost:8080/api/users';

  user: User;
  id: number;

  constructor(private http: HttpClient) {}

  isLoggedIn() {
    return this.user != null;
  }

  isAdmin() {
    return this.user.isAdmin;
  }

  unLoggin() {
    this.user = null;
  }

  login(username: string, password: string) {
    this.id = null;
    this.http.get<number>(`${this.usersurl}/verify?username=${username}&password=${password}`).subscribe(id => this.id = id);
    alert(this.id);
    if (this.id != null) {
      return true;
    } else {
      return false;
    }
  }

}

从'@angular/core'导入{Injectable}；
从'@angular/common/http'导入{HttpClient}；
从“../entities/User”导入{User}；
@可注射（）
导出类用户服务{
私有用户surl:'http://localhost:8080/api/users';
用户：用户；
id：编号；
构造函数（私有http:HttpClient）{}
伊斯洛格丁（）{
返回this.user！=null；
}
伊萨明（）{
返回this.user.isAdmin；
}
解开{
this.user=null；
}
登录（用户名：string，密码：string）{
this.id=null；
this.http.get（`this.usersurl}/verify？username=${username}&password=${password}`）。subscribe（id=>this.id=id）；
警报（this.id）；
如果（this.id！=null）{
返回true；
}否则{
返回false；
}
}
}

It警报[对象]

---

localhost:8080/api/users/verify返回例如8仅8无json格式8

当您发出HTTP请求时，它返回您订阅的可观察对象。如果要操作数据并仅返回id，则可以使用map函数

function getUserID() {

    return this.http.get('this.usersurl + '/verify?username=' + username + 
    '&password=' + password').map(val => val.id)
}

this.getUserID.subscribe((data) => {
    console.log(data); // should return the id (number).
});

---

因此上面只返回val对象的id（编号）。

要在Angular内部进行Http调用，我们可以使用

HttpClient

。这要求我们在根模块（app.module.ts）内部导入

HttpClientModule

：

在我们注册为提供商的服务（即data.service.ts）内部，我们可以注入HttpClient并使用

get

方法：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class DataService {
  ROOT_URL = 'http://your-api.com';

  constructor(private http: HttpClient) {}

  getUserId(username: string, password: string) {
    return this.http
      .get<number>(`${this.ROOT_URL}/verify?username=${username}&password=${password}`)
  }
}

从'@angular/core'导入{Injectable}；
从'@angular/common/http'导入{HttpClient}；
@可注射（）
导出类数据服务{
根目录http://your-api.com';
构造函数（私有http:HttpClient）{}
getUserId（用户名：字符串，密码：字符串）{
返回此文件。http
.get（`${this.ROOT\u URL}/verify？username=${username}&password=${password}`）
}
}

在我们的组件内部，我们可以订阅我们的服务发出的可观测数据：

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-root',
  template: `
    <h1>UserId: {{userId}}</h1>
  `,
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  userId: number;

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.dataService
      .getUserId('test', 'password')
      .subscribe(id => this.userId = id);
  }
}

从'@angular/core'导入{Component，OnInit}；
从“./data.service”导入{DataService}；
@组成部分({
选择器：'应用程序根'，
模板：`
UserId:{{UserId}}
`,
样式URL:['./app.component.css']，
})
导出类AppComponent实现OnInit{
userId:number；
构造函数（私有数据服务：数据服务）{}
恩戈尼尼特（）{
这是数据服务
.getUserId（'test'，'password'））
.subscribe（id=>this.userId=id）；
}
}

或者，我们可以使用异步管道让Angular处理订阅：

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'app-root',
  template: `
    <h1>UserId: {{userId$ | async}}</h1>
  `,
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  userId$: Observable<Number>;

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.userId$ = this.dataService.getUserId('test', 'password');
  }
}

从'@angular/core'导入{Component，OnInit}；
从“./data.service”导入{DataService}；
从“rxjs/Observable”导入{Observable}；
@组成部分({
选择器：'应用程序根'，
模板：`
UserId:{{UserId$| async}
`,
样式URL:['./app.component.css']，
})
导出类AppComponent实现OnInit{
userId$：可观察的；
构造函数（私有数据服务：数据服务）{}
恩戈尼尼特（）{
this.userId$=this.dataService.getUserId（'test'，'password'）；
}
}

获取“数字”是什么意思？您想要数字格式的数据而不是字符串格式的数据吗？你能把一些代码和json格式放在一起吗？@KHAN-API服务器返回纯数字exa。2@ErikBystroň仍然没有意义，请为您的问题和您迄今为止尝试过的代码添加更多细节。@Ahmadmnzr我尝试过这个.http.get（this.usersurl+'/verify？username='+username+'&password='+password）。订阅（val=>this.id=val）；但它返回[object]谢谢，但它不起作用，id仍然未定义。。。它只能在上使用constructor@ErikBystroň这是没有帮助的，您没有尝试尝试它并提供适当的反馈。我添加了我的实际代码和一些更多信息。造成这种情况的原因是普通数字，而不是json格式的数字。。。。

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'app-root',
  template: `
    <h1>UserId: {{userId$ | async}}</h1>
  `,
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  userId$: Observable<Number>;

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.userId$ = this.dataService.getUserId('test', 'password');
  }
}