Question

我正在使用Angular 2.1.0，并且在尝试创建HTTP服务以调用我的服务器提供的REST API时遇到问题。我使用Google浏览了很多，并阅读了许多关于如何做到这一点的文章，但我已经搞砸了。这是问题，看起来我的HTTP服务正在运行并从REST API获取数据。我的组件订阅了服务返回的observable，但数据永远不会被分配给组件变量，我的模板爆炸说我试图从NULL获取属性。

这是我的服务代码：

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>

这是我的简化模板代码：

@javax.xml.bind.annotation.XmlSchma(namespace="http://www.w3.org/1999/xlink",elementFormDefault=javax.xml.bind.annotation.XmlNsForm.QUALIFIED,xmlns={@XmlNs(prefix"xlink",namespaceURI="http://www.w3.org/1999/xlink)})

非常感谢任何帮助，指示或想法！

提前致谢，道格

Answer 1

您需要允许auth_info为null，因为http调用是异步的。您可以在将属性绑定到模板的位置之前添加*ngIf，或者在属性名称中添加?来执行此操作：auth_info?.auth_displayname

Angular 2 HTTP服务问题

1 个答案: