Question

* ngIf在angular4中无法正常工作。

步骤1：加载应用程序时显示处理图像和下一行“真实” 第2步：一旦页面加载，我在我的component.ts中将busy boolean var设置为false。一旦页面加载，我看到处理图像，然后下一行显示＆＃39; true＆＃39;然后在下一行显示＆＃39; false＆＃39;。

在第2步中，它应该只显示false。它不应该显示处理图像，然后才真正＆＃39;。

以下是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 {JobCleanupService} from '../shared';
import {JobCleanUp} from '../shared/jobcleanup/jobcleanup.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-jobcleanup',
    templateUrl: './jobcleanup.component.html',
    styleUrls: ['./jobcleanup.component.css'],
    providers: [JobCleanupService]
})

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


   constructor(private jobcleanupService: JobCleanupService, 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.isMAST = false;
       this.isCC = false;
       this.isIE = false;
       this.filteredOrg = '0';
       this.filteredBay = 'noBay';
       this.metricsTitle = 'orgTitle';
         this.getJobCleanupDetails(this.filteredOrg, this.owner, this.filteredBay);
          this.getDataTableList(this.owner);
          this.busy = false;
       }
   }

Answer 1

我猜你的忙是字符串而不是布尔值，

尝试

<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

您的变量不应该是var变量。它应该是this.busy = false

之类的东西

* ng如果没有在Angular4中工作

2 个答案: