http에서 각도 번호를 가져 오는

Question

누군가가 http 응답에서 각도 5로 번호를 가져 오는 것을 도와 줄 수 있습니까? 나는 지금 그것을하는 방법을하지 않는다, 나는 인터넷에서 검색하고 있었다. 그러나 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; 
    } 
    } 

} 

이 경고 [개체 개체] 로컬 호스트 : 8080/API/사용자/사용자가 HTTP 요청을하는 경우에는 JSON이

Answer 1

8 형식의없는 경우에만 8 예 (8)에 대한 반환을 확인 당신이 구독하는 관찰 가능한 객체를 반환합니다. 데이터를 조작하고 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). 
}); 

위의 내용은 val 객체의 id (숫자) 만 반환합니다.

Answer 2

각도 내에서 HTTP 호출을하려면 HttpClient을 사용할 수 있습니다. 우리가 할 수있는,

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) 우리가 공급자로 등록했습니다이 (app.module.ts) 우리 루트 모듈의 내부 HttpClientModule을 가져 우리를 필요 우리의 구성 요소의 내부

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

우리가 다음 우리의 서비스에서 방출 관찰에 가입 할 수 있습니다 :

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

알터 get 방법을 HttpClient를 주입하고 사용 우리는 비동기 파이프를 사용하여 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'); 
    } 
}