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

Question

我有一个用 angular 编写的仪表板应用程序 2. 我正在使用 api 调用数据。检索数据后，我将它们呈现在图表中。作为下面的演示 link。当我从 dashboardcomponent 的 ngOnInit() 方法进行 api 调用时，我得到空响应，但是如果我使用按钮单击事件做同样的事情，所有数据都会按预期加载。进行 api 调用并在第一次加载时填充 UI 中的所有数据的最佳 place/initiate 是什么？

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

Answer 1

按照 Angular 团队预期的方式构建您的应用程序意味着将任何 API 调用放入可注入服务中。查看 @Injectable。从那里您可以将服务注入到需要进行 API 调用的任何组件或指令中。

此外，API 调用可能是异步的，这可能是您得到 null 的部分原因。这些必须在 Observables 或 Promises/Callbacks.

中处理

Answer 2

ngOnInit() 可以进行 api 调用。我没有清楚的订阅功能图片。在 UI 中渲染之前，我必须在我的打字稿文件中进行一些复杂的计算。我应该只在订阅方法中这样做。不要分配全局变量并执行点运算符并期望事情像魅力一样工作。我发现，直到你有听众订阅不保存你的数据。这意味着如果你有大 json 和嵌套元素，你必须在订阅方法中执行 this.data.innerdata[0].finalvalue[0] 而不是将其传递给方法并执行所有有趣的事情。

将您的信息传递给 initData(data) 并进行所有计算和渲染。

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;
}

}

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

Angular 2 Dashboard application web api call at initialization

api

dashboard

web

ngoninit

angular