Angular 2仪表板应用程序在初始化时调用web api

Question

我有一个以角度2编写的仪表板应用程序。我正在使用api调用数据。检索数据后，我将它们呈现在图表中。作为下面的演示链接。当我从dashboardcomponent的ngOnInit（）方法进行api调用时，我得到了空响应，但如果我使用按钮单击事件做同样的事情，所有数据按预期方式加载。 什么是最好的地方/开始进行api调用，并在第一次加载时在UI中填充所有数据？

http://preview.themeforest.net/item/avenxo-responsive-angularjs-html-admin/full_screen_preview/11660185?ref=cirvitis&clickthrough_id=1107952073&redirect_back=true

Answer 1

ngOnInit（）可以进行api调用。我没有订阅功能的清晰图片。在用户界面中呈现之前，我必须在我的打字稿文件中进行复杂的计算。我应该只在订阅方法中执行此操作。不要使用全局变量进行赋值，并使用点运算符，并期望事情像魅力一样工作。我发现，直到你有听众订阅不会为你保存数据。这意味着如果你有嵌套元素的大型json，你必须在subscribe方法中执行this.data.innerdata [0] .finalvalue [0]，而不是将其传递给方法，并执行所有有趣的事情。

将您的信息传递给initData（数据）并进行所有计算并进行渲染。

export class Recent implements OnInit{ 
allFiles; 
public allFiles_error:Boolean = false; 
openModalWindow:boolean=false; 
images = []; 
currentImageIndex:number; 
opened:boolean=false; 
imgSrc:string; 

constructor(private _recentService: RecentService) { } 

ngOnInit() { 
    this._recentService.getJson().subscribe(
     data => initData(data), 
     err => handleError(), 
     () => console.log('Completed!')); 
} 

initData(data){ 
    this.allFiles = data; 
    console.log("allFiles: ", this.allFiles); 
    console.log(this.allFiles.length); 
    for(var i = 0; i < this.allFiles.length; i++) { 
     this.images.push({ 
     thumb: this.allFiles[i].url, 
     img: this.allFiles[i].url, 
     description: "Image " + (i+1) 
     }); 
    } 
    console.log("Images: ", this.images); 
    console.log(this.images.length); 
    console.log(this.images); 
    console.log(typeof this.images); 
} 

handleError() { 
    this.allFiles_error = true; 
} 

}

Answer 2

要建立在角队打算将意味着把任何API调用到注射服务的方式您的应用程序。检出@Injectable。从那里你可以将服务注入任何需要进行API调用的组件或指令。

此外，API调用可能是异步，这可能是您得到空值的原因的一部分。这些必须在Observable或Promises/Callbacks中处理。