* ngIf在Angular 2中的测试条件发生变化后无法评估

我正在开发多页角度应用程序。用户在页面上的选择决定了下一页的视图。* ngIf在Angular 2中的测试条件发生变化后无法评估

下面是部分代码：

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>

标志的条件是一个布尔值，它是从数据库中提取。

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

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

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

我试着用Resolve实现行为，但我仍然面临同样的问题。 App在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} }

来源

2017-03-10 PM_Oz

指这个格式化你的代码 https://meta.stackoverflow.com/questions/251361/how -do-i-format-my-code-blocks – IsuruAb

您是否添加了Internet Explorer Polyfills？ – mickdev

请提供更多代码。 –

尝试这种解决方法。首先，将布尔值设置为false。然后将其在ngOnInit钩值：

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>

来源

2017-03-15 10:05:15 mickdev

感谢您的建议。创建一个局部变量对行为没有影响。只有在控制台处于打开状态时才会在Internet Explorer中加载Div而不是在ngOnInit（）中获取标志值我尝试使用解决方案，但仍然是同样的问题。 –

* ngIf在Angular 2中的测试条件发生变化后无法评估

回答

相关问题