0

我有一个用 Angular 2 编写的仪表板应用程序。我正在使用 api 调用数据。检索数据后，我将它们呈现在图表中。如下面的演示链接。当我从仪表板组件的 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

4

2 回答 2

0

ngOnInit() 可以进行 api 调用。我对订阅功能没有清晰的了解。在 UI 中渲染之前，我必须在我的 typescript 文件中进行一些复杂的计算。我应该只在订阅方法中这样做。不要用全局变量分配并做一个点运算符并期望事情像魅力一样工作。我发现在你订阅监听器之前不会为你保存数据。这意味着如果您有带有嵌套元素的大型 json，您必须在 subscribe 方法中执行 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;
}

}

于 2017-10-20T19:23:05.217 回答
0

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

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

于 2017-10-19T17:58:26.157 回答