Angular4 中的 *ngIf 问题

Question

*ngIf is not working properly in angular4.

Step 1: While loading the application displays processing image and next line 'true'.
Step 2: once the page is loaded i am setting the busy boolean var as false in my component.ts. once the page is loaded i am seeing processing image , then next line it displays 'true' and then next line it displays 'false'.

In the step 2 it should display only false. It should not display processing image and then 'true'.

Below is the html code. Can you please help me to fix this issue?

     <div *ngIf="busy">
            <h4 align="center"><img src="assets/images/Processing.gif"></h4>
      {{busy}}
    </div>
    <div *ngIf="!busy">
      {{busy}}
    <!-- other  components -->
    </div>

component.ts(pasted only few lines of code)

import {Component, OnInit} from '@angular/core';
import {maptargetService} from '../shared';
import {maptarget} from '../shared/maptarget/maptarget.model';
import {SelectItem} from 'primeng/primeng';
import {AdalService}from './../services/adal.service';
import { Router } from '@angular/router';
import { ActivatedRoute, Params} from '@angular/router';


@Component({
    selector: 'app-maptarget',
    templateUrl: './maptarget.component.html',
    styleUrls: ['./maptarget.component.css'],
    providers: [maptargetService]
})

export class maptargetComponent  implements OnInit {
    busy: boolean;
    isLoggedIn: any;


   constructor(private maptargetService: maptargetService, private adalService: AdalService, private router: Router, private route: ActivatedRoute) { }

   ngOnInit() {
       this.isLoggedIn = this.adalService.isAuthenticated;
       this.busy = true;
       this.isEnable = false;
       this.resetCardValues();
       // if(this.owner == null){
            this.owner = 'Summary';
       // }
       this.isOrgSelected = false;
     
       this.filteredOrg = '0';
       this.filteredBay = 'noBay';
       this.metricsTitle = 'orgTitle';
         this.getmaptargetDetails(this.filteredOrg, this.owner, this.filteredBay);
          this.getDataTableList(this.owner);
          this.busy = false;
       }
   }

Answer 1

I guess your busy is a string instead of a boolean,

Try

<div *ngIf="busy ==='true'">
        <h4 align="center"><img src="assets/images/Processing.gif"></h4>
  {{busy}}
</div>
<div *ngIf="busy==='false'">
  {{busy}}
<!-- other  components -->
</div>

Answer 2

busy boolean var as false

your variable should not be var a variable. it should be something like this.busy = false