相关疑难解决方法(0)

Angular HTTP GET与TypeScript错误http.get(...).map不是[null]中的函数

我在Angular中遇到HTTP问题.

我只想要GET一个JSON列表并在视图中显示它.

服务类

import {Injectable} from "angular2/core";
import {Hall} from "./hall";
import {Http} from "angular2/http";
@Injectable()
export class HallService {
    public http:Http;
    public static PATH:string = 'app/backend/'    

    constructor(http:Http) {
        this.http=http;
    }

    getHalls() {
           return this.http.get(HallService.PATH + 'hall.json').map((res:Response) => res.json());
    }
}
Run Code Online (Sandbox Code Playgroud)

HallListComponentgetHalls从服务中调用方法:

export class HallListComponent implements OnInit {
    public halls:Hall[];
    public _selectedId:number;

    constructor(private _router:Router,
                private _routeParams:RouteParams,
                private _service:HallService) {
        this._selectedId = +_routeParams.get('id');
    }

    ngOnInit() {
        this._service.getHalls().subscribe((halls:Hall[])=>{ 
            this.halls=halls;
        });
    }
}
Run Code Online (Sandbox Code Playgroud)

但是,我有一个例外:

TypeError:this.http.get(...).map不是[null]中的函数 …

rxjs angular

326
推荐指数
6
解决办法
23万
查看次数

Angular 2 - Routing - CanActivate使用Observable

我有一个实现CanActivateAuthGuard(用于路由).

canActivate() {
    return this.loginService.isLoggedIn();
}
Run Code Online (Sandbox Code Playgroud)

我的问题是,CanActivate结果依赖于http-get-result - LoginService返回一个Observable.

isLoggedIn():Observable<boolean> {
    return this.http.get(ApiResources.LOGON).map(response => response.ok);
}
Run Code Online (Sandbox Code Playgroud)

我如何将它们结合在一起 - 使CanActivate依赖于后端状态?

angular2-routing angular2-http angular

75
推荐指数
3
解决办法
6万
查看次数

“Observable&lt;IEmployee[]&gt;”类型上不存在属性“catch”

我是角度的新手。目前我正在学习 angular 6 功能。当我尝试处理错误时,会出现一些问题,例如,

找不到模块:错误:无法解析“D:\WORKSPACE\Angular5\binding\src\app”中的“rxjs/add/observable/throw”

找不到模块:错误:无法解析“D:\WORKSPACE\Angular5\binding\src\app”中的“rxjs/add/operator/catch”

src/app/employee.service.ts(20,14) 中的错误:错误 TS2339:“Observable”类型上不存在“catch”属性

这是我的employee.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { IEmployee } from './employee';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

//It self injectable defendency.
@Injectable({
  providedIn: 'root'
})
export class EmployeeService {

  private _url: string = "/assets/data/employees.json";

  constructor(private http: HttpClient) { }

  getEmployees(): Observable<IEmployee[]>{
    return this.http.get<IEmployee[]>(this._url)
            .catch(this.errorHandler);                    
  }

  errorHandler(error: HttpErrorResponse){
      return Observable.throw(error.message || "Server Error");
  }
}
Run Code Online (Sandbox Code Playgroud)

员工.ts

export interface IEmployee{ …
Run Code Online (Sandbox Code Playgroud)

javascript angular

5
推荐指数
1
解决办法
3312
查看次数

Angular 4和OAuth-拦截401响应,刷新访问令牌并重试请求

如标题所示,我正在使用OAuth身份验证开发Angular 4项目。

每当http请求以状态代码401响应时,我都会拦截该请求,更新访问令牌并重试失败的请求。

当我收到401消息时,请求将被正确拦截,访问令牌将按应有的方式刷新。失败的请求也将再次执行,但不再将其响应传递给组件。

因此,问题在于应该在刷新令牌和重试请求之前,应在请求响应上观察的我的组件抱怨该视图的日志“接收属性错误”。

我的拦截器:

import { Injectable, Inject, Injector } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpResponse,
  HttpErrorResponse,
  HttpEvent,
  HttpInterceptor,
  HttpSentEvent,
  HttpHeaderResponse,
  HttpProgressEvent,
  HttpUserEvent
} from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { AuthService } from './auth.service';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { TokenManager } from '../../../util/TokenManager';
import { AuthUserResponse } from '../../../models/authUserResponse';
import 'rxjs/add/operator/switchMap';

@Injectable()
export class AuthTokenExpiredInterceptor implements HttpInterceptor {

  isRefreshingToken: boolean = false;
  tokenSubject: BehaviorSubject<string> = new BehaviorSubject<string>(null);

  constructor( private injector: …
Run Code Online (Sandbox Code Playgroud)

typescript angular-http-interceptors angular

1
推荐指数
1
解决办法
2662
查看次数