* ngIf在angular2中的组件类变量上

Question

I want to show loader when the flag variable is true and hide it when flag is false (two way data binding), but I dont know how to use *ngIf with component variable

app.component.ts

import { Component, OnInit } from '@angular/core';
import { User } from '../../models/users.model';
import { UserServices } from '../../services/User.service';
@Component({
    selector: 'app-default',
    templateUrl: './default.component.html',
    styleUrls: ['./default.component.css']
})
export class defaultComponent implements OnInit {
    public flag: boolean;
    userList: User[];
    constructor(private _service: UserServices) {
        this.flag = true;
    }
    ngOnInit() {
        this.getData();
    }
    getData() {
        this.flag = true;
        this._service.loadData().subscribe( response => { this.userList = response; });
        this.flag = false;
    }
}

default.component.html

    <div *ngIf="flag == true" class="loader">Loading...</div>
    <div class="content">
        <!--my html-->
    </div>

I want to show loader div only when service is call and hide it after call compeleted.

Answer 1

Set your flag to false when the response returns. Otherwise, you are setting it to false immediately:

getData() {
    this.flag = true;
    this._service.loadData().subscribe( response => { 
        this.userList = response;
        this.flag = false;
    });
}

Also, you don't need to check for true explicitly:

*ngIf="flag"

And if you like, you can initialize your flag when you declare it, instead of doing it in the constructor:

public flag: boolean = true;

Answer 2

Move the this.flag = false; into the subscribe block's . Because of the javascript's async feature, your flag gets set to False before the backend call.

And a simple ngIf condition would be better.

<div *ngIf="flag" class="loader">Loading...</div>

---

getData() {
    this.flag = true;
    this._service.loadData().subscribe( response => { 
        this.userList = response;
        this.flag = false;
    });
}

PLNKR

Answer 3

Your getData needs a bit of work:

getData() {
    this.flag = true;
    this._service.loadData().subscribe((response) => {
            this.userList = response;
            this.flag = false;
        });
}

And your component can get even simpler: get rid of the extra comparison, ngIf already works on booleans:

<div *ngIf="flag" class="loader">Loading...</div>