angular - 视图初始化后的 HTML 渲染问题

Question

下面是我的组件 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>

胜任 TS 的必要部分

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

所以，这里的问题是直到数据返回显示数据未找到的 HTML。几秒钟后，将显示值列表。在这里，我怎样才能至少显示一个新文本，如“正在加载..”，直到数据完成加载？谢谢。

Answer 1

您可以添加其他变量进行加载：

 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>