別のAngular2 Two-Wayデータバインディング（流星で）

Question

私はAngular2のデータバインディングについてここでいくつかの質問を閲覧しましたが、期待していた結果を得ることができません。私は両方の角度に新しいです&流星。ここで

は、だから私は起こることを期待し、私はgetNameFormのための送信ボタンをクリックしたときであることはラベルのためである私は私のapp.component.html

<form [formGroup]="getNameForm" (ngSubmit)="getName()"> 
    <label>ID: </label><br> 
    <input type="text" formControlName="userID"><br> 
    <button type="submit">Get</button> 
</form> 

<div (ngModel)="basicUser"> 
<label name="basicUserName">{{basicUser.userName}}</label><br> 
</div> 

そして、何app.component.ts

... 
export class AppComponent implements OnInit { 
basicUser: BasicUser = { ... } 
... 

getName(): void { 
... 
    Meteor.call('api.getName',{ 
    userId: this.getNameForm.value.userID 
    }, (err, res) => { 
    if (err) { 
     console.log(err); 
     alert(err); 
    } else { 
     console.log(res); 
     this.basicUser = res; 
    }); 
... 
} 

でだで持っているものだbasicUserNamebasic.userNameの値で更新されます。代わりに、画面上のデータのリフレッシュはありません。

しかし、入力テキストボックス&をクリックし、ページ上の他の場所をクリックすると、ラベルの値が正しくリフレッシュされます。ボタンのメソッドの実行時にラベルで使用されている変数が変更されているため、フォームのsubmitをクリックすると、これが発生するようにしたいと考えています。

ここで一見関連する質問に対する回答を見ると、メソッドの最後の行に含めて試しました。this.ref.detectChanges()を試しました。それは役に立たなかった。

ngModelを使用して他の回答を提案していますが、これは私が現在コードで行っているところですが、それでもやっていません。私は何かが明らかに欠けているように感じる。

Answer 1

実際にここでの主な問題は、角度2と流星を一緒に使用しており、両方が異なるゾーンにあることです。あなたのゾーンの外にある変化を検知しないので、あなたはこの方法を使ってこの問題を解決することができます。あなたのコンストラクタタイプ使用中の

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

この

constructor(private ngZone: NgZone) {} 

、あなたはこれがあなたの問題を解決する角度

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

によって検出したいどの値がこのようngZoneを使用:)