*ngIf on component class angular2 中的变量

Question

我想在 flag 变量为 true 时显示 loader，在 flag 为 false 时隐藏它（双向数据绑定），但我不知道如何将 *ngIf 与组件变量一起使用

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>

我只想在调用服务时显示加载程序 div，并在调用完成后隐藏它。

Answer 1

在响应 returns 时将您的标志设置为 false。否则，您将立即将其设置为 false：

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

此外，您不需要明确检查 true：

*ngIf="flag"

如果你愿意，你可以在声明时初始化你的标志，而不是在构造函数中进行：

public flag: boolean = true;

Answer 2

将 this.flag = false; 移动到 subscribe 块的 .由于 javascript 的异步功能，您的 flag 在后端调用之前被设置为 False。

一个简单的 ngIf 条件会更好。

<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

您的 getData 需要一些工作：

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

而且您的组件可以变得更简单：去掉额外的比较，ngIf 已经适用于布尔值：

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

*ngIf on component class angular2 中的变量

*ngIf on component class variable in angular2

angular-components

angular