Warnung in der Meteor Angular 2 App erscheint nur nach einem Klick im Browser

Question

Ich habe den ng2-bootstrap ngb-alert auf einer Seite einer Meteor Angular 2 App implementiert. Wenn ich eine Warnung an das Array Warnungen in Typoskript drücke, wird die Warnung nur angezeigt, nachdem ich erneut auf das Browserfenster geklickt habe.

Der Push wird innerhalb eines Rückrufs der Funktion Accounts.createUser ausgeführt. Wenn der Push innerhalb der Anmeldemethode ausgeführt wird (und nicht die Rückruffunktion Accounts.createUser), wird die Warnung sofort angezeigt.

Ich habe auch versucht, eine asynchrone Pipe im ngFor zu verwenden und einen Promise-Typ für die Variable alerts zu verwenden. Dies löst das Problem auch nicht.

Darunter Beispiel Codierung für das Problem.

Vorlage html

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

Komponentenklasse

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

Eigentlich hier Hauptproblem ist, dass wir Winkel 2 und Meteor zusammen und beide sind in verschiedenen Zonen verwenden. so eckig erkennt keine Änderung außerhalb seiner Zone.Sie können dieses Problem mit dieser Methode lösen.

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

in Sie Konstruktortyp Verwendung dieses

constructor(private ngZone: NgZone) {} 

und verwenden ngZone wie diese, die Werte, die Sie durch Winkel ermitteln möchten

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 konfrontiert auch das gleiche Problem, wenn ich angluar2 verwendet -Meteor erstes Mal. Es funktioniert für mich. ich hoffe, das wird auch für dich funktionieren :)