标签: angular4-httpclient

我正在尝试使用接口从API获取数据.贝娄是我的临时界面

export interface ITemp {
    id: number,
    name: string,
    age:  number
}

下面是我的HTTP服务,其中有一个fn getHomedetails,它调用API.

import {Injectable} from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ITemp } from "../interfaces/temp";
import { Observable } from "rxjs/Observable";
import 'rxjs/Rx';

@Injectable()
export class HttpService{

    http:any;
    baseUrl: String;

    constructor(http:HttpClient){
        this.http = http;
        this.baseUrl = 'some_url';
    }

    getHomeDetails(): Observable<ITemp>  {
        return this.http.get<ITemp>(this.baseUrl); //problem is here 
        //when mouse is pointed on get<ITemp> it shows "Untyped function calls may not accept type arguments"

    }

}

接口未定义.我不知道我做错了什么.上面的语法是一个有角度的4.3X语法.我使用的编辑器是崇高的视觉工作室.

我正在将应用程序从 AngularJS 升级到 Angular 5。我想出了大部分事情，但仍然处于学习过程中，我无法找出将自动完成列表连接到后端的最佳方法。Material Design 网站也没有提到这一点。

下面是代码现在的样子：

  <mat-form-field>

    // chips are up here

    <mat-autocomplete (optionSelected)="chipAdd($event,field)" #auto="matAutocomplete">
      <mat-option [value]="opt.id" *ngFor="let opt of field.options">
        {{ opt.name }}
      </mat-option>
    </mat-autocomplete>

  </mat-form-field>

我已经删除了 mat-chip-list 并且只包含了相关的代码。

所以我的问题是......现在我从 field.options 获取选项——而不是这个，一旦我开始输入，我如何从 http 后端动态加载它们？

谢谢你的帮助！:)

我正在尝试测试我用于 Angular CLI 项目的服务。我已经测试了其中的所有功能，除了那些有订阅的功能，而订阅给我带来了麻烦。请帮忙。我应该如何测试这个功能？

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Rx';
import { HttpClient } from '@angular/common/http';
import * as moment from 'moment';

@Injectable()
export class BuildService {

  constructor(private httpClient: HttpClient) { }

  index() {
    let o = new Observable( observer => {
      this.httpClient.get("/api/build").subscribe(builds => {
        this.setInitialResultsValue(builds);
        observer.next(builds);
        observer.complete();
      });
    });
    return o;
  }
}

当前的测试尝试：

import { TestBed, inject } from '@angular/core/testing';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { MockBackend } from '@angular/http/testing'; …

我是Angular的新手，所以我需要一些帮助，我的问题是打电话给http get，我使用service是我的第一个get

我的第一项服务

 getFirstData() { return this.http.get<FirstDataResults ('http://myurl.com/api/Classes/ads', httpOptions);    

我的组件TS文件

this.data.getFirstData().subscribe(
  data => {
    this.firsobjects = data.results;
  },
  err => console.error(err),
  () => this.getComplementData(this.firstobjects)

);

到现在为止，一切都很好，可以获取我的数据，完成后，我运行第二个函数getComplementData

我的第二次服务

 getSecondData(idFirstObject: String) {

return this.http.get<ComplementDataResults>(
  'http://myurl.com/api/Classes/Complement?' +
  'where={'"idFirstObject":"' + idFirstObject + '"}',
  httpOptions); }   

我的组件TS文件

getComplementData(firsobjects) {
this.number = 0;
for (var _i = 0; _i < firsobjects.length; _i++) {
  this.data.getSecondData(firsobjects[_i].id).subscribe(
    (data) => {
        var a = (data.results);
        this.firsobjects[this.number].complements = a;
    }, err => console.log('error ' + err),
    () => console.log('Ok ')
  ); …

当我使用HttpClient使用响应Obj 更新html时，它会更新值，但会出现多个错误。

    import { any } from 'codelyzer/util/function';
    import { Injectable } from '@angular/core';
    import { HttpClient } from '@angular/common/http';

    @Injectable()
    export class AuthService {

      constructor(private httpClient: HttpClient) { }
      get() {
        return this.httpClient.get<any>('/capi/v2/users/me', {
          observe: 'body',
          responseType: 'json'
        });
      }
    };

    import { AuthService } from './../../services/api/auth-service';

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

    @Component({
        selector: 'app-dashboard',
        templateUrl: './dashboard.component.html'
    })

    @Injectable()
    export class DashBoardComponent implements OnInit {
        user;
        constructor(private authService: AuthService) {}; …