Question

我有一个用角度2编写的仪表板应用程序。我正在使用api调用数据。检索数据后，我在图表中渲染它们。如下面的演示链接。当我从dashboardcomponent的ngOnInit（）方法进行api调用时，我得到null响应但是如果我使用按钮单击事件做同样的事情，则所有数据都按预期加载。在第一次加载时，进行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

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

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

Answer 2

ngOnInit（）可以进行api调用。我没有清楚的订阅功能图片。在在UI中渲染之前，我必须在我的打字稿文件中进行几个复杂的计算。我应该只在订阅方法中这样做。不要分配全局变量并做一个点运算符，并期望事物像魅力一样工作。我发现，直到你有听众订阅不会为你的数据保存。意思是如果你有大型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;
}

}

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

2 个答案: