Angular如何在从API提取数据的同时添加加载器动画？

Question

我试图显示加载程序从API获取数据时，我应该如何实现这一点，请提供帮助。截至目前，如果产品列表的长度为0，那么我正在显示加载程序bt，这是不正确的方法

HTML

<div *ngIf="! CoffeeItemList?.length" class="mt-5 text-center">
       <img src="https://chickenrecipeseasy.top/images/loader.gif"/>
    </div>

TS

  constructor(private getDataListingService: DataListingService) {}

  ngOnInit(): void {
    this.getGlobalSearchList('');
    this.getAllData();
  }
  getAllData() {
    this.getDataListingService.getAllDataLists().subscribe(value => {
      this.CoffeeItemList = value.data;
    });
  }
  getGlobalSearchList(type) {
    this.CoffeeItemList = [];
    this.getDataListingService.getAllDataLists().subscribe(value => {
      let data = [];
      data = value.data;
      console.log(data);
    }
    });
  }
  getSmartSearchValues(search) {
    if (search === '' ) {
      this.getAllData();
      return false;
    } else {
      this.getGlobalSearchList(this.type);
      this.searchText = this.type;
      }
    this.getDataListingService.searchList(search).subscribe(value => {
      this.CoffeeItemList = value.data;
    });

  }
}

Answer 1

使用ng，否则将完成管道，如下所示：

Answer 2

首先，在component.ts中声明-showLoader默认为假。