Question

我正在使用Angular 2，并且无法将api调用中的数据呈现到我的模板中。我会发布我的组件和模板的简短示例。

TS文件

import { Component, OnInit } from '@angular/core';
import { GlobalDirective } from '../../../global.directive';

export class MainInfoComponent implements OnInit {

constructor(public globalDirective: GlobalDirective) {}

 logURL() {
     //returns undefined
     console.log(this.globalDirective.bgURL);

 }

 ngOnInit() {
     this.logURL();
 }
}

this.globalDirective.bgURL是一个img网址的字符串，我们会说http://www.example.com/myImg.png

GlobalDirective文件调用位于S3上的JSON文件，并返回img链接和我试图在模板中呈现的其他内容。我知道正在返回正确的数据，因为我可以在控制台中看到它。

模板

<p>{{globalDirective.bgURL}}</p>   <!--  This works  -->
<header [ngStyle]="{'background': 'url(' + globalDirective.bgURL + ')'}">  <!-- Returns undefined  -->

我试图找出为什么我可以在P标签中呈现globalDirective.bgURL，但如果我尝试将其呈现为标题样式或在ngOnInit中记录它，则返回undefined。

我认为这个问题可能与JSON请求的异步性质有关。如果我设置一个等于我想要的URL的字符串，然后在模板中指定它可以正常工作。

TS文件

bgURL: string = 'http://www.example.com/myImg.png';

模板

<!-- This works -->
<header [ngStyle]="{'background': 'url(' + bgURL + ')'}">

在此先感谢您的帮助，几天来我一直在打击这个。

Answer 1

应该是，

<header [ngStyle]="{'background': 'url(' + globalDirective.bgURL + ')'} ">

Angular 2无法从API调用

1 个答案: