Question

我有一项服务，可以从本地数据库加载人员列表，并且所有这些现在都很好用。我可以正确显示列表...我什至可以使用一个过滤器来处理列表，并且效果很好...但是当我尝试向过滤器中添加装载轮时，它将不会显示...

在AppComponent的开头，我将一个名为“ loadingData”的变量初始化为false。

export class AppComponent implements OnInit, AfterViewInit {
  loadingData: boolean = false;

然后在我的过滤器方法中，我尝试将变量设置为true，然后再设置为false。

  public doFilter = (value: string) => {
    this.loadingData = true;
    setTimeout(() => 
    {
      this.dataSource.filter = value.trim().toLocaleLowerCase();
    },
    5000);
    this.loadingData = false;
  }

filter方法有效，但HTML方面的内容永不变...

当“ loadingData”为true时，我想显示一条简单消息：

<ng-container *ngIf="loadingData">
  <p>Loading data, please wait...</p>
</ng-container>

但是ngIf函数似乎并不想实时工作...如果我将“ loadingData”初始化为true而不是false，则会显示该消息，但它永远不会消失...

更改变量后如何显示此消息并消失？

Answer 1

仅在异步操作完成后，才应将loadingData设置为false：

public doFilter = (value: string) => {
    this.loadingData = true;
    setTimeout(() => {
      this.dataSource.filter = value.trim().toLocaleLowerCase();
      this.loadingData = false;
    }, 5000);
}

角度ngif不会随着变量

1 个答案: