* 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中的測試條件發生變化後無法評估

回答

相關問題