Meteor 中的警报 Angular 2 应用仅在浏览器中单击后出现

Question

我已经在 Meteor Angular 2 应用程序的页面上实现了 ng2-bootstrap ngb-alert。当我将警报推送到打字稿中的警报数组时，警报仅在我再次单击浏览器 window 后显示。

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

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

问题编码示例下方。

模板html

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

组件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;
}

Answer 1

实际上这里的主要问题是我们同时使用 angular 2 和流星，并且两者都在不同的区域。所以angular不检测其zone.you之外的变化可以使用这种方法解决这个问题。

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

在你的构造函数类型中使用这个

constructor(private ngZone: NgZone) {}

并像这样使用 ngZone，您希望通过 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 时也遇到了同样的问题 time.It 对我有用。我希望这对你也有用:)

Meteor 中的警报 Angular 2 应用仅在浏览器中单击后出现

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

data-binding

callback

meteor

ng2-bootstrap

angular