Alert in Meteor Angular 2 app only appears after click in browser

心不动则不痛 提交于 2019-12-13 15:59:10

问题


I've implemented the ng2-bootstrap ngb-alert on a page of a Meteor Angular 2 app. When I push an alert to the alerts array in typescript, the alert is only displayed after i click the browser window again.

The push is done within a callback of the Accounts.createUser function. If the push is done within the signup method (and not the Accounts.createUser callback function) the alert is displayed immediate.

I've also tried to use an async pipe in the ngFor and use a Promise type for the alerts variable. This doesn't solve the problem either.

Underneath sample coding for the problem.

template html

...
<p *ngFor="let alert of alerts">
 <ngb-alert [type]="alert.severity">{{ alert.detail }}</ngb-alert>
</p>
...
<button type="button" (click)="signup()">Signup</button>
...

component class

...
alerts: IAlert[];
...
signup(): void {
  this.alerts = [];

  Accounts.createUser(this.credentials, (error) => {
    if (error) {
      this.alerts.push({severity: 'danger', detail: error.reason || 'Unknown error'});
    } else {
      this.alerts.push({severity: 'success', detail: 'Account created!'});
    }
  });
}
...

IAlert

export interface IAlert {
  severity: string;
  detail: string;
}

回答1:


Actually here main problem is we are using angular 2 and meteor together and both are in different zones. so angular don't detect change which are outside of its zone.you can solve this problem using this method.

import { NgZone } from '@angular/core';

in you constructor type use this

constructor(private ngZone: NgZone) {}

and use ngZone like this which values you want to detect by angular

  generate_head_list_data(){
        var self = this;
         Meteor.call('refresh_graph_list', self.all_csvdata, self.newGraphdata, (error, response) => {
                if (error) {
                    console.log(error.reason);
                    self.ngZone.run(() => { <-- put you code inside ngZone in which you are getting issue in rendering
                        self.processingStart = false;
                    });
                } else {
                    self.ngZone.run(() => {
                        self.processingStart = false;
                    });
                    console.log(response);
                }
            });
    }

i also faced the same problem when i used angluar2-meteor first time.It works for me. i hope this will works for you also :)



来源:https://stackoverflow.com/questions/41145290/alert-in-meteor-angular-2-app-only-appears-after-click-in-browser

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!