* ngIfは、角度2のテスト条件の変更後に評価されません。

Question

私は複数の角度のアプリケーションに取り組んでいます。ページのユーザー選択は、次のページのビューを決定します。ここ

コンポーネント符号である：HTMLテンプレートに

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

、Iは利用条件を評価しています* ngIf

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

フラグがデータベースからフェッチされるブール値です。

booleanの値はtrueですが、divはページに表示されません。これはインターネットエクスプローラでのみ発生します。私は角度2の変化の検出がDOMをロードした後でビューをリフレッシュするために働いていないと思われます。

奇妙なことに、Internet Explorerでコンソールを開くと、正しいdivがページに表示されます。

どうすればこの問題を解決できますかをお勧めします。

私は解決を使用して動作を実装しようとしましたが、私はまだ同じ問題に直面しています。アプリケーションはChrome、Firefox、Safari、Edgeブラウザでは正常に動作しますが、コンソールを開かずにインターネットエクスプローラで失敗します。ここで

は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フックでその値を設定します。

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>