在检索数据时显示加载动画（Angular 10）

Question

我在检索数据时尝试在 Angular 10 中显示加载动画。如果我使用特定的时间值，我可以显示加载动画，但我无法在收集数据时显示它。请在下面查看我的代码的 sn-p。而不是手动调用加载动画，我希望它只在“getAllDocuments”函数运行时运行。有时我的硬编码时间值太短而其他时间值太长。我希望它每次都是正确的。

ngOnInit() {
    this.getAllDocuments();
    this.triggerLoadingAnimation(12);
  }

  ngAfterViewInit(): void {
    this.dataSource.sort = this.sort;
    this.dataSource.paginator = this.paginator;
  }

  public triggerLoadingAnimation(num){
    this.spinner.show();

    setTimeout(() => {
      this.spinner.hide();
    }, num*1500);
  }

  async getAllDocuments() {
    this.repoService.getData('/api/Prometheus/Documents')
    .subscribe(res => {
      this.dataSource.data = res as Document[];
    })
  }

Answer 1

你很亲密。
我还添加了错误处理，删除了不必要的异步，并在构造函数而不是 ngOnInit 中运行 ajax 调用以避免不必要的等待时间。

constructor(private repoService: RepoService) {
    this.getAllDocuments();
}

ngOnInit() {
  // stuff that really need @Input data to be filled
}

ngAfterViewInit(): void {
    this.dataSource.sort = this.sort;
    this.dataSource.paginator = this.paginator;
}

getAllDocuments() {
    this.spinner.show();
    this.repoService.getData('/api/Prometheus/Documents')
    .subscribe((res: Document[]) => {
      this.dataSource.data = res;
      this.spinner.hide();
    },
    error => {
      this.spinner.hide();
      console.error('error while retrieving documents', error);
      // handle error
    })
}

Answer 2

您做错了，您应该调用微调器以显示何时进行 API 调用并在检索数据时将其隐藏。

更好的方法是在构造函数中调用它，因为在完成创建组件 DOM 时调用 ngOnInit，通过构造函数注入所有必需的依赖项并处理输入绑定

constructor() {
    this.getAllDocuments();
}


ngOnInit() {
    //this.getAllDocuments();
  }

  ngAfterViewInit(): void {
    this.dataSource.sort = this.sort;
    this.dataSource.paginator = this.paginator;
  }

  async getAllDocuments() {
    this.spinner.show();
    this.repoService.getData('/api/Prometheus/Documents')
    .subscribe((res: Document[]) => {
      this.dataSource.data = res;
    }, (err) => {
        //handle the errors
         console.log(err);
    }, () => {
        this.spinner.hide();
    });
  }

Answer 3

加载微调器是一种很好的用户体验技术，但是您需要加载多少微调器才能让用户满意？可能取决于应用程序的大小。 由于您需要在检索数据时显示微调器，因此使用全局微调器将是一种更好的方法。使用全局微调器，只要检索数据，微调器就会显示。 下面是一个很好的拦截器实现来显示一个微调器 Using Interceptor to show spinner

Answer 4

您可以使用以下代码：

getAllDocuments() {
 this.spinner.show(); // SHOW WHEN DATA IS LOADING
    this.repoService.getData('/api/Prometheus/Documents')
    .subscribe(res => {
      this.dataSource.data = res as Document[];
     this.spinner.hide();  //  HIDE WHEN DATA IS LOADED
    })
  }

Answer 5

您可以在同一个函数中显示和隐藏微调器，而不是为此创建新函数。

async getAllDocuments() {
    this.spinner.show();
    this.repoService.getData('/api/Prometheus/Documents')
    .subscribe(res => {
          this.dataSource.data = res as Document[];
          this.spinner.hide();
    });
    
}