Еще одно двунаправленное привязку по углу (с метеорным)

Question

Я рассмотрел некоторые вопросы здесь, касающиеся привязки данных на Angular2, но я не могу получить ожидаемый результат. Я также новичок как в Angular & Meteor.

Вот что у меня в 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; 
    }); 
... 
} 

Так что я ожидаю, чтобы случиться, когда я нажимаю кнопку отправки для getNameForm для этикетки basicUserName для обновления со значением от basic.userName. Вместо этого на экране нет обновления данных.

Однако, если я нажму на текстовое поле ввода &, затем щелкните в другом месте страницы, значение метки обновится правильно. Я хотел бы, чтобы это произошло при нажатии кнопки формы, поскольку переменная, которая используется в метке, изменяется при выполнении метода кнопки.

Подняв некоторые ответы на похожие вопросы, я дал this.ref.detectChanges() попытку включить его в качестве последней строки метода. Это не помогло.

Некоторые другие ответы здесь предлагаются с использованием ngModel, где я сейчас нахожусь с кодом, но это тоже не делает трюк. Я чувствую, что мне не хватает чего-то очевидного.

Answer 1

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

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

в вас типа конструктор использования этого

constructor(private ngZone: 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); 
       } 
      }); 
    } 

это решит вашу проблему :)