Angular2个HTTP服务问题

Question

我正在使用 Angular 2.1.0，但在尝试创建 HTTP 服务来调用服务器提供的 REST API 时遇到问题。我使用 Google 环顾四周，并阅读了很多关于如何执行此操作的文章，但我搞砸了一些事情。

问题出在这里，看起来我的 HTTP 服务运行正确并从 REST API 获取数据。我的组件订阅了服务返回的可观察对象，但数据从未分配给组件变量，我的模板崩溃了，说我正在尝试从 NULL 获取属性。

这是我的服务代码：

import { Injectable } from '@angular/core';
import { Http, Response, URLSearchParams } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

import { AuthInfoInterface } from '../interfaces/authentication';

@Injectable()
export class AuthenticationService {
  private url: string = 'api/authentication';

  constructor (private http: Http) {}

  get(): Observable<AuthInfoInterface> {
    let params = new URLSearchParams();

    params.set("redirect", "false");
    params.set("passive", "true");
    return this.http.get(this.url, {search: params})
      .map((res: Response) => res.json())
      .catch(this.handleError);
  }
  handleError(error: any) {
    let errorMsg = error.message || 'Server Error!';
    console.error(errorMsg);
    return Observable.throw(errorMsg);
  }
}

这是我的组件代码：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import { AuthenticationService } from '../services/authentication.service';
import { AuthInfoInterface } from '../interfaces/authentication';

@Component({
  selector: 'authentication',
  templateUrl: 'authentication.component.html',
  styleUrls: ['authentication.component.scss'],
  providers: [AuthenticationService]
})
export class AuthenticationComponent implements OnInit, OnDestroy {
  showLogin: boolean = true;
  auth_info: AuthInfoInterface;
  subscription: any;

  constructor(private authenticationService: AuthenticationService) {
  }
  getAuthentication() {
    this.subscription = this.authenticationService.get()
      .subscribe(
        auth_info => this.auth_info = auth_info,
        err => console.error('Error: ' + err)
      );
  }
  ngOnInit() {
    this.getAuthentication();
  }
  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

这是我的简化模板代码：

  <div>
    {{auth_info.auth_displayname}}
  </div>

我该如何解决这个问题？

Answer 1

您需要允许 auth_info 成为 null，因为 http 调用是异步的。您可以通过在将属性绑定到模板的位置之前添加 *ngIf 或通过向属性名称添加 ? 来实现：auth_info?.auth_displayname

Angular2个HTTP服务问题

Angular 2 HTTP service problems

rxjs

angular-http

angular