Meteor Angular 2应用程序中的警报只有在浏览器中点击后才会出现 [英] Alert in Meteor Angular 2 app only appears after click in browser

问题描述

我在Meteor Angular 2应用程序的页面上实现了ng2-bootstrap ngb-alert。
当我向typescript中的alerts数组发出警报时，只有在我再次单击浏览器窗口后才会显示警报。

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.

回调Accounts.createUser函数。
如果push在注册方法（而不是Accounts.createUser回调函数）中完成，则会立即显示警报。

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.

我也尝试在ngFor中使用异步管道，并为alerts变量使用Promise类型。这不解决问题。

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.

下面的问题示例编码。

模板html

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

组件类

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

推荐答案

其实这里主要的问题是正在使用角度2和流星，两者都在不同的区域。所以角度不会检测到它的区域之外的变化。你可以使用这种方法来解决这个问题。

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

并使用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);
                }
            });
    }

当我第一次使用angluar2-meteor时，我也面临着同样的问题。为我工作我希望这也适用于你：）

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 :)

这篇关于Meteor Angular 2应用程序中的警报只有在浏览器中点击后才会出现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！