将对象从组件传递到服务

时间:2017-04-04 05:38:09

标签: angular

我想从服务URL中的组件传递数据。这可能。

目前在我的console.log(hotel_id);我得到了两个值。我希望通过我的服务。

这是我的组件:

import { Component } from '@angular/core';
import { GetHotelService } from '../../services/gethotel/getHotel.service';

@Component({
    moduleId: module.id,
    selector: 'selectHotel',
    templateUrl: 'selectHotel.component.html',
    providers: [GetHotelService]
})
export class selectHotelComponent  {
    hotelData: HotelData[];
    hotel: string;

    constructor(private getHotelService: GetHotelService){

        this.getHotelService.getHotel().subscribe(hotelData => {
            this.hotelData = hotelData.data;
            for (let e of hotelData.data){
                var hotel_id = e.hotel_id;
                console.log(hotel_id);
            }
        })

    }
}

interface HotelData {
    hotel_name: string,
    hotel_id: number
}

而不是hotel_id = 40我想从那里传递值:

这是服务:

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
    export class GetRoomService {
        constructor(private http: Http){
        }

        getRoom(){
            return this.http.get('url&hotel_id=40')
                .map(res => res.json());
        }
    }

同样在我的选择标签中,我无法将第一个值设置为选中。 x.hotel_id会给我ID。我能从这里传递它吗?

<div>
    <select name="hotel">
        <option *ngFor = "let x of hotelData" [value] = "x.hotel_name">{{x.hotel_name}}</option>
    </select>
</div>

这是getHotelService:

import {Injectable} from '@angular/core';
import {Http, Headers, Response, RequestOptions} from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
    export class GetHotelService {
        constructor(private http: Http){
        }

        getHotel(request:any){
        const body=JSON.stringify(request);
        let headers = new Headers({ 'Authorization': 'value' });
        let options = new RequestOptions({ headers: headers });

        return this.http.post('' , body, options).map(res => res.json());

        }
    }

2 个答案:

答案 0 :(得分:1)

getRoom方法更改为接受参数

getRoom(hotel_id){
    return this.http.get(`url&hotel_id=${hotel_id}`)
        .map(res => res.json());
}

然后从selectHotelComponent

传递参数
var hotel_id = e.hotel_id;
this.getHotelService.getRoom(hotel_id).subscribe(
   (data) => console.log(data)
);

答案 1 :(得分:1)

我相信你应该看看承诺。这样,您就可以在下载数据时使用数据:http://learnangular2.com/es6/promises

getRoom(hotel_id:number):Promise<Room[]> {
  this.http.get('<correct-url>').toPromise().then((response) => {
    return response.json() as Room[];
  }).catch((ex) => {
    console.error('Error fetching rooms', ex);
  });
}

我只是猜测你是否会收到Room个对象,以及它是否会成为一个数组。我想指出的是,也许唯一的问题是你不等待数据返回并返回它。