Angular实现前端任务执行时显示加载状态的问题

问题根源 #

你当前的代码里，节点筛选逻辑是同步执行的，而Angular的DOM更新要等当前同步任务完全跑完才会触发。所以你刚把filterLoading设为true，紧接着就执行完所有节点操作，又立刻把它设回false——浏览器根本没机会渲染加载图标。

解决方案 #

把筛选逻辑放到异步任务队列里，让Angular先完成视图更新（显示加载图标），再执行节点筛选操作。常用两种实现方式：

修正后的代码（test.component.ts）

...
export class Test implements OnInit{
...
filterLoading: boolean = false;

filterTree(filterIdx: number){
    this.filterLoading = true;

    // 用微任务让Angular先更新视图，再执行筛选
    Promise.resolve().then(() => {
        const nodes = $('#jstree').jstree(true).get_json('#', { flat: true });
        
        // 遍历所有节点（原代码漏写了遍历逻辑）
        nodes.forEach(node => {
            if(filterIdx === 0){
                // 显示Active节点，隐藏Inactive节点
                node["status"] === "inactive" 
                    ? $("#jstree").jstree(true).hide_node(node) 
                    : $("#jstree").jstree(true).show_node(node);
            } else {
                // 显示Inactive节点，隐藏Active节点
                node["status"] === "active" 
                    ? $("#jstree").jstree(true).hide_node(node) 
                    : $("#jstree").jstree(true).show_node(node);
            }
        });

        // 筛选完成后关闭加载状态
        this.filterLoading = false;
    });
}

补充说明 #

1. 用Promise.resolve().then属于微任务，比setTimeout（宏任务）的执行时机更早，加载图标会更快显示；如果需要兼容极低版本浏览器，也可以替换成setTimeout(() => { ... }, 0)。
2. 原代码存在两处疏漏：
   • 没有遍历nodes数组，直接使用node变量会报错
   • 只处理了filterIdx=0的逻辑，补充了filterIdx=1的反向筛选
3. TS语法规范：推荐用小写的number替代大写Number作为类型标注

内容的提问来源于stack exchange，提问作者Udhayha Karthik