Angular 视图初始化后的HTML呈现问题

下面是我的HTML组件

    <li *ngIf="this.currentData.length == 0">
          Data not found
    </li>
    <li
      #itemElement
      *ngFor="let item of currentData; let i = index"
      (click)="onSelectionChange(valueAccessor(item), itemElement)"
      [ngClass]="{ 'k-state-selected': isItemSelected(item) }"
    >
      <input
        type="checkbox"
        id="chk-{{ valueAccessor(item) }}"
        (focus)="onFocus(itemElement)"
        class="k-checkbox"
        [checked]="isItemSelected(item)"
      />
      <label
        class="k-multiselect-checkbox k-checkbox-label"
        for="chk-{{ valueAccessor(item) }}"
      >
        {{ textAccessor(item) }}
      </label>
    </li>

---

因此，这里的问题是直到返回显示未找到数据的HTML数据。几秒钟后，将显示值列表。在数据加载完成之前，我如何至少显示一个新文本，如“加载…”？谢谢。

您可以为加载添加其他变量：

 loading = true;

 public ngAfterViewInit() {
        this.vlSubscription = this.valueListService.getValueListData(this.gridType, this.valueListObj).subscribe((data: any) => {
            this.loading = false;
            this.data = data.values;
            this.currentData = this.data;
        });
    }

加载。。。


找不到数据


...

（1）。为什么在

ngAfterViewInit（）

hook中分配变量。在

ngOnInit（）

hook中执行此操作非常好（甚至更快）。(2). 如果您使用的是默认CD策略，那么在插值和属性绑定（如

{{valueAccessor（item）}}

和

isItemSelected（item）

中绑定函数不是一个好主意。它们将针对每个CD周期执行。你有很多这样的陈述。相反，您可以在订阅中循环数组，调用必要的函数，并使用它们的响应创建新属性。并直接在模板中使用这些新属性。原因是我需要调用API并在单击过滤器图标时加载受尊重列的数据。这就是我使用afterviewiniti的原因。

 loading = true;

 public ngAfterViewInit() {
        this.vlSubscription = this.valueListService.getValueListData(this.gridType, this.valueListObj).subscribe((data: any) => {
            this.loading = false;
            this.data = data.values;
            this.currentData = this.data;
        });
    }

    <li *ngIf="this.loading">
          Loading...
    </li>

    <ng-container *ngIf="!this.loading">
      <li *ngIf="this.currentData.length == 0">
           Data not found
      </li>
      <li
        #itemElement
        *ngFor="let item of currentData; let i = index"
        (click)="onSelectionChange(valueAccessor(item), itemElement)"
        [ngClass]="{ 'k-state-selected': isItemSelected(item) }">
       ...
    </ng-container>