httpから角を取得する番号

Question

誰かが角度の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; 
    } 
    } 

} 

この警告[オブジェクトのオブジェクト] はlocalhost：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

Angularの内部でHttpコールを行うには、HttpClientを使用できます。これが私たちのルートモジュール（app.module.ts）の内側にHttpClientModuleをインポートするために私たちを必要とします。我々は提供者として登録した私たちのサービス（すなわちdata.service.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 {} 

、我々はできます私たちはその後、当社のサービスから放射された観察可能に購読することができます私たちのコンポーネントの内部

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

：HttpClientをを注入し、getメソッドを使用し

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