另一个 Angular2 双向数据绑定（带 Meteor）

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

实际上这里的主要问题是我们同时使用 angular 2 和 meteor 并且两者在不同的区域。所以 angular 不检测其之外的变化 zone.you 可以使用此方法解决此问题。

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

在你的构造函数类型中使用这个

constructor(private ngZone: NgZone) {}

并像这样使用 ngZone，您希望通过 angular

检测哪些值

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

这将解决您的问题:)

另一个 Angular2 双向数据绑定（带 Meteor）

Another Angular2 Two-Way DataBinding (with Meteor)

angular

meteor

typescript

data-binding

2-way-object-databinding