从角度API获取数据后如何绑定视图

【问题标题】：how to bind the view after getting the data from API in angular从角度API获取数据后如何绑定视图
【发布时间】：2023-04-07 11:42:01
【问题描述】：

我有一个如下图所示的组件

<app-data-table  [headerDataList]=headerDataList 
            [dataList]=gradeDetailsList></app-data-table>

gradeDetailsList 是从 API 获取的数据列表

getAllGradeDetails() {
        this.gradeDetailsService
            .getBulkGradeDetails()
            .subscribe((data: any) => {
                console.log(data);
                this.gradeDetailsList = data.reverse();
            });
    }

在 API 返回数据之前渲染视图是否有生命周期方法，我可以在获取数据后用于绑定视图

【问题讨论】：

标签： angularjs database api datatables

【解决方案1】：

好问题。

是的，在集成视图之前可以通过多种方式获取数据

第一种方式：在导航路线之前，您可以使用 Angular Resolve Guard 获取数据。可能对您有帮助的链接：https://www.tektutorialshub.com/angular/angular-resolve-guard/

第二种方式：可以在组件元素中设置标志条件。假设最初设置 isDataLoaded 为 false，当 API 有成功响应并在“this.gradeDetailsList”变量中设置数据时变为 true。

第三种方式：放一个loader，和变量一样，最初让loader为true，加载数据后loader为false，所以加载完所有数据后，loader为false消失，您将获得加载数据的表格。您可以将 and 用于加载程序并相应地设置条件。

链接：https://stackblitz.com/edit/angular-bx37fj?file=src/app/progress-spinner-overview-example.ts

希望，它可以帮助您进一步解决问题..

【讨论】：