Angular 2 Dashboard 应用程序 web api 在初始化时调用答案

【问题标题】：Angular 2 Dashboard application web api call at initializationAngular 2 Dashboard 应用程序 web api 在初始化时调用
【发布时间】：2018-03-31 20:19:45
【问题描述】：

我有一个用 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

【问题讨论】：

你能分享你试过的代码吗？

标签： angular api web dashboard ngoninit

【解决方案1】：

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

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

【讨论】：

我使用 observable 和 @inject 服务来加载数据。我的问题是我应该在哪里进行 api 调用，以便当我从 ngOnInit() 方法进行 api 调用时，一切都可以很好地呈现出来。 api响应没有问题。我认为 UI 线程不喜欢等待获取 api 响应。
@tksdotnet1 如果您发布一些代码，我们可能会为您提供更多帮助。我发现在构造函数或 ngOnInit（从设计角度看是首选）中进行 API 调用效果很好。在异步调用完成之前，数据将为空。你在使用 subscribe() 函数吗？

【解决方案2】：

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

}

【讨论】：