如何在 Angular 中获取数据

Question

谁能帮我从 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 returns 例如 8 只有 8 没有 json 格式化 8

Answer 1

当您发出 HTTP 请求时，它 return 是您订阅的可观察对象。如果你想操作数据并且只 return 你可以使用 map 函数的 id。

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

所以上面的return只是val对象的id（编号）

Answer 2

要在 Angular 中进行 Http 调用，我们可以使用 HttpClient。这需要我们在根模块 (app.module.ts) 中导入 HttpClientModule:

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

或者，我们可以使用异步管道让 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 中获取数据

How to fetch data in Angular

http

httpresponse

angular-http

angular

angular-httpclient