Оповещение в приложении Meteor Angular 2 появляется только после клика в браузере

Я реализовал ng2-bootstrap ngb-alert на странице приложения Meteor Angular 2. Когда я нажимаю предупреждение в массив предупреждений в машинописном тексте, предупреждение отображается только после того, как я снова щелкну окно браузера.

Нажатие выполняется в рамках обратного вызова функции Accounts.createUser. Если отправка выполняется в методе регистрации (а не в функции обратного вызова Accounts.createUser), предупреждение отображается немедленно.

Я также пытался использовать асинхронный канал в ngFor и использовать тип 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>
...

класс компонента

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

angular data-binding meteor callback ng2-bootstrap
person Tinie Sluijter    schedule 14.12.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

На самом деле основная проблема здесь в том, что мы используем angular 2 и метеор вместе, и оба находятся в разных зонах. поэтому angular не обнаруживает изменений, которые находятся за пределами его зоны. Вы можете решить эту проблему, используя этот метод.

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. У меня это работает. я надеюсь, что это сработает и для вас :)

person Amit kumar    schedule 15.12.2016
comment
Спасибо, Амит, я боролся с этой проблемой несколько недель! Он работает идеально! - person Tinie Sluijter; 15.12.2016