我们如何在div中的clarity框架中添加加载器，因为我们可以在Datagrid属性[clrDgLoading]="loading“中添加加载器

Question

我们如何在div标签的clarity框架中添加加载器，因为我们可以在Datagrid attribute [clrDgLoading]="loading"中添加加载器？

Answer 1

Clarity有一个微调组件，详细的文档可以在这里找到：https://vmware.github.io/clarity/documentation/spinners

Answer 2

在模板中设置clrDgLoading属性，如下所示。

<clr-datagrid [clrDgLoading]="loading">

在Component.ts中，将"loading“属性初始化为true。然后，从数据服务加载数据后，将"loading“属性设置为false。

export class Component implements OnInit {
  loading = true;
  constructor(
    private dataService: DataService,
  ) {}

  ngOnInit(): void {
    this.dataService
      .getData()
      .subscribe((data) => {
        // your code
        this.loading = false;
      });
  }