*ngIf 在 Angular 2 中更改测试条件后不进行评估

Question

我正在开发一个多页 Angular 应用程序。用户在页面上的选择决定了下一页的视图。

这是组件代码：

    export class DataComponent implements OnInit, OnDestroy {

        constructor(private _router: Router, private _activatedRoute: ActivatedRoute, private _applicationService: ApplicationService) {        
          this.subscription = this._activatedRoute.params
          .subscribe((param: any) => {
            this.applicationId = param['applicationId'];                                                                                                                                                                  
          });                                                                                                                                                                                                                 
        }

        ngOnInit(){
          this._applicationService.getApplication(this.applicationId)
          .subscribe(application =>  {this.application = application;});                   
        }
}

在 HTML 模板中，我使用 *ngIf 评估条件

<div *ngIf="application?.flag"> Flag is true </div>

flag 是一个从数据库中获取的布尔值。

即使 boolean 的值为 true，div 也不会显示在页面上。这只发生在 Internet Explorer 中。我怀疑角度 2 的更改检测在加载 DOM 后无法刷新视图。

奇怪的是，如果我在 Internet Explorer 上打开控制台，页面会以正确的 div 正常加载。

请建议我如何解决这个问题。

我尝试使用 Resolve 实现该行为，但我仍然面临同样的问题。应用在 Chrome、Firefox、Safari 和 Edge 浏览器中完美运行，但在 Internet Explorer 中无法打开控制台。

这里是 polyfills.ts 中的条目：

import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/set';
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';
import 'zone.js/dist/zone';

我正在使用 webpack。

这里是解析代码：

@Injectable()
export class ApplicationResolve implements Resolve<Application>{

    constructor(private _applicationService: ApplicationService){}

    resolve(route: ActivatedRouteSnapshot){     
        return this._applicationService.getApplication(route.params['applicationId']);
    }

}

这是路由模块中的入口：

{ path: 'clearData/:applicationId', component: DataComponent, resolve: {application: ApplicationResolve} }

Answer 1

试试这个解决方法。首先，将布尔值设置为 false。然后在 ngOnInit hooks 中设置它的值：

show:boolean = false

ngOnInit(){
          this._applicationService.getApplication(this.applicationId)
          .subscribe(application =>  {
              this.application = application;
              this.show = application.flag
          });                   
}

然后像这样更新您的模板：

<div *ngIf="show">Flag is true</div>