使用typescript进行REST调用

时间:2017-03-21 16:31:28

标签: rest angular typescript-typings

我安装了" sb admin 2"仪表板与html5 / angular2。 此示例适用于打字稿。要实例化图表,文件charts.compenent.ts定义该类,然后定义图表属性和数据,如下所示

import { Component, OnInit} from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'chart-cmp',
    templateUrl: 'chart.component.html'
})

export class ChartComponent implements OnInit {
    ngOnInit() {

        var container:any = $('#container');
        container.highcharts({
            chart: {
                type: 'area'
            },
...................................

就我而言,我想从restfull服务中获取日期。

你能帮帮我吗? 任何输入都有帮助

1 个答案:

答案 0 :(得分:1)

确保您拥有正确的导入

import {Http, Response, URLSearchParams}                                         from '@angular/http';

这是如何发出获取请求,

获取请求

        saveProfile(model: Profile, isValid: boolean) {
                let params: URLSearchParams = new URLSearchParams();
// set params to go to URL
                params.set('email', model.email);
                params.set('first_name', model.first_name);

                return this.http.get('url/path/here/dont/forget/port',
                    { search: params })
                    .map((res: Response) => res.json())
                    .subscribe((res) => {
                        console.log(res);
    // Map the values in the response to useable variables
                        this.auth.user.email = res.user.email;
                        this.auth.user.first_name = res.user.first_name;
                    });
            }
        }

发布请求

如何发布帖子请求,这是auth0库中使用的流行帖子请求。你可以找到here

authenticate(username, password) {

  let creds = JSON.stringify({ username: username.value, password: password.value });

  let headers = new Headers();
  headers.append('Content-Type', 'application/json');

  this.http.post('http://localhost:3001/sessions/create', creds, {
    headers: headers
    })
    .subscribe(
      data => {
        this.saveJwt(data.json().id_token);
        username.value = null;
        password.value = null;
      },
      err => this.logError(err.json().message),
      () => console.log('Authentication Complete')
    );
  }

这些示例将从服务器获得响应。如果您想要进行更多技术性操作,例如在视图中更新要更新的数据,则必须创建observable。如果我是你,那么当你需要了解observable时,我会把它归结为你。