Angular4中的*ngIf问题

*ngIf在angular4中工作不正常

步骤1：加载应用程序时，显示处理图像和下一行“true”。
步骤2：加载页面后，我将在我的component.ts中将busy boolean变量设置为false。加载页面后，我看到正在处理图像，然后下一行显示“true”，然后下一行显示“false”

在步骤2中，它应仅显示false。它不应显示处理图像，然后显示“true”

下面是html代码。你能帮我解决这个问题吗

     <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;
       }
   }

{{busy}}
{{busy}}
ts（只粘贴了几行代码）
从“@angular/core”导入{Component，OnInit}；
从“../shared”导入{maptargetService}；
从“../shared/maptarget/maptarget.model”导入{maptarget}；
从'priming/priming'导入{SelectItem}；
从“/../services/adal.service”导入{AdalService}；
从'@angular/Router'导入{Router}；
从“@angular/router”导入{ActivatedRoute，Params}；
@组成部分({
选择器：“应用程序映射目标”，
templateUrl:'./maptarget.component.html'，
样式URL:['./maptarget.component.css']，
提供者：[maptargetService]
})
导出类maptargetComponent实现OnInit{
忙：布尔；
伊斯洛格丁：任何；
构造函数（私有maptargetService:maptargetService，私有adalService:adalService，私有路由器：路由器，私有路由：ActivatedRoute）{}
恩戈尼尼特（）{
this.isLoggedIn=this.adalService.isAuthenticated；
this.busy=true；
this.isEnable=false；
此参数为.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；
}
}

我猜您的busy是字符串而不是布尔值

试一试

{{busy}}
{{busy}}

忙布尔变量为false

---

您的变量不应该是

var

变量。它应该类似于

this.busy=false

您可以发布组件吗。请始终包含所需的最少代码。这是不够的信息。在这种情况下，我们需要html和ts。根据您的代码，它不会立即更改，因为您设置为False您保存了我的一天！！我在parent

flag=“true”

=>[flag]=“true”中更改了，现在是布尔值。

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