2016-12-14 7 views
1

Meteor Angular 2アプリのページにng2-bootstrap ngb-alertを実装しました。 アラートをtypescriptのアラートアレイにプッシュすると、アラートはブラウザウィンドウを再度クリックした後にのみ表示されます。Meteor Angle 2アプリのアラートブラウザ内のクリック後にのみ表示

プッシュは、Accounts.createUser関数のコールバック内で実行されます。 プッシュがsignupメソッド(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; 
} 

答えて

1

実はここでの主な問題は、私たちが一緒に、角度2と流星を使用していて、両者が異なるゾーンにあります。あなたのゾーンの外にある変化を検知しないので、あなたはこの方法を使ってこの問題を解決することができます。あなたのコンストラクタの型を使用しますが、私はangluar2を使用したときに、私も同じ問題に直面した

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

角度によって検出したいどの値がこのような本

constructor(private ngZone: NgZone) {} 

と使用ngZoneで

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

私のために働く。私もこれがあなたのために働くことを願っています:)

+0

ありがとうAmit、私はこの問題で数週間苦労しました!それは完璧に動作します! –

関連する問題