クリックイベントへの反応が遅い

Question

私は、データベースに移動して新しいレコードを追加し、観測可能なデータを更新する追加ボタンが付いたコンポーネントを持っています。新しいレコードを追加する機能は、新しいレコードが追加されると解決するPromiseです。コンポーネントがデータベースにアクセスしている間に、新しいレコードが追加されるまで「追加」ボタンを非表示にしたいと思います。

テンプレート：新しいレコードを追加するための約束は約1で解決し

export class AuctionComponent { 
    addingRow: boolean = false; 

    addRow() { 
    this.addingRow=true; 
    console.log('Adding Row'); 
    this.salesSvc.addBid() 
     .then(()=> { 
     this.addingRow = false; 
     console.log('finished'); 
     }); 
    } 
} 

：

<table> 
... 
</table> 

<button (click)="addRow()" *ngIf="!addingRow">Add New</button> 

コンポーネントクラス（typescriptです）を次のようにテンプレートやコンポーネントが大体見えます秒。これは私が起こると思うだろうものです：[追加]ボタンを

• クリック
• 「行の追加」を
• を{ボタンが消え} {解決するための約束のための第二を待つ
• コンソールに表示}
• {ボタンが再び表示}
• コンソールにここ

を示す "終了しました"現れる「終了」「行の追加」を追加]ボタンを

• クリック
• は
• コンソールに表示{解決するための約束のための第二のを待つ}
が
• ：実際に何が起こっているかでありますコンソールで
• IはngZone.run（）、ChangeDetectorRef .markForChecを使用して試した

{ボタンを簡単&再表示が消え} k（）& .detectChanges（）、およびsetTimeout（）。私はまたデフォルトの& OnPushのChangeDetectionStrategyで遊んだ。私は何が欠けていますか？

更新

だから、約束は手を差し伸べるとfirebaseにデータを保存しています。 firebaseの約束を解決することと関係があることは、これを保持しているようです。

私はちょうどそれの約束の一部をテストするためにコンポーネントを変更：これを行う

export class AuctionComponent { 
    addingRow: boolean = false; 

    addRow() { 
    this.addingRow=true; 
    console.log('Adding Row'); 
    // this.salesSvc.addBid() 
    this.promise() 
     .then(()=> { 
     this.addingRow = false; 
     console.log('finished'); 
     }); 
    } 

    promise() { 
    return new Promise((resolve, reject) => { 
     setTimeout(resolve, 2000); 
    }); 
    } 
} 

ボタンは、私が予想されるだけのように振る舞うことができます。

サービスでaddBid方法は、（this.afがAngularFireである）以下のようになります。

addBid(sale: ISale) { 
    return this.af.database.list(`sales/${sale.year}/bids`) 
     .push({lot: null, price: 0, description: ''}); 
    } 

は、だから私は多分何かが約束のfirebase味で起こっていることを考えたので、私は私の中で全体を包ん自分の約束：

addBid(sale: ISale) { 
    return new Promise((resolve, reject) => { 
     this.af.database.list(`sales/${sale.year}/bids`) 
     .push({lot: null, price: 0, description: ''}) 
     .then(() => resolve()) 
     .catch(() => reject()); 
    }); 
    } 

しかし、私はまだ遅延応答を得ています。 firebase/angularfire2に何かがあり、それで再塗装が起こらないのですか？

Answer 1

あなたができることは、サーバーからの応答をいくつかの変数に格納し、受け取るデータの長さによって真または偽を返す別のgetメソッドを作成することです。したがって、データを取得するときにはデータの長さを取得します。この場合はtrueを返し、それ以外の場合はfalseを返します。このgetメソッドをボタンにバインドします。

第2のオプション：最初は、変数がtrue（ボタンがクリックされたとき）に設定されていますが、これは正しいです。 getメソッドでは、この変数をデータの長さに応じてfalse/true（非表示/表示するロジックに応じて）として返すことができます。

あなたのケースではこれがうまくいくと思います。

Answer 2

これは価値があるので、私はsetTimeout（）のaddRowの約束部分をラップすることでこれを動作させることができました。私はそれがなぜ必要なのか、なぜそれがうまくいくのかまだ分からないので、その分野でいくつかのフィードバックや方向性を得たいと思っています。

addRow() { 
    this.addingRow = true; 
    setTimeout(() => { 
     this.salesSvc.addBid(this.sale) 
     .then(() => { 
      this.addingRow = false; 
     }); 
    }, 0);