Question

我正在研究多角度应用程序。页面上的用户选择决定了下一页的视图。

以下是组件代码：

    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中。我怀疑在加载DOM后，角度2的更改检测无法刷新视图。

奇怪的是，如果我在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钩子中设置它的值：

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>

* AngI 2中测试条件发生变化后，ngIf无法评估

1 个答案: