-1

有人可以帮我从 Angular 5 中的 http 响应中获取数字吗？我现在不知道该怎么做，我在互联网上搜索，但 Angular 增长非常快，所以它对我没有帮助。谢谢你的帮助 ！

我的代码：

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;
    }
  }

}

它警告 [object Object] localhost:8080/api/users/verify 返回例如 8 仅 8 无 json 格式 8

4

2 回答 2

3

要在 Angular 内部进行 Http 调用，我们可以使用HttpClient. 这需要我们导入HttpClientModule根模块（app.module.ts）的内部：

import { HttpClientModule } from '@angular/common/http';
import { DataService } from './data.service';

// Omitted other dependencies for brevity
@NgModule({
  imports: [HttpClientModule],
  providers: [DataService],
})
export class AppModule {}

在我们注册为提供者的服务（即 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}`)
  }
}

在我们的组件内部，我们可以订阅从我们的服务发出的 Observable：

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);
  }
}

或者，我们可以使用 Async 管道让 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');
  }
}
于 2017-12-09T11:20:27.177 回答
0

当您发出 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（数字）。

于 2017-12-09T11:11:03.263 回答