Angular ngif 不随变量变化

Question

I've got a service that loads a list of people from a local database, and that all works great right now. I get a list displayed properly... I even got a filter working with the list and it works great... but when I attempt to add a loading wheel to the filter, it will not display...

Right at the beginning of my AppComponent, I initialize a variable called "loadingData" to false.

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

Then in my filter method, I attempt to set the variable to true, and then back to false.

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

The filter method works, but the HTML side of things never changes...

I've got a simple message I want to display when "loadingData" is true:

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

But the ngIf function doesn't appear to want to work in real-time... if I initiallize "loadingData" to true instead of false then the message shows up, but it never disappears...

How can I get this message to show up and disappear as I change the variable?

Answer 1

you should set loadingData to false only after async operation finishes:

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