Question

我已经浏览了一些关于Angular2上数据绑定的问题，但是我无法得到我期望的结果。我也是Angular＆amp;的新手。流星。

以下是我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中的值进行更新。相反，屏幕上没有刷新数据。

但是，如果我点击输入文本框＆amp;然后单击页面上的其他位置，标签的值将正确刷新。我希望在单击表单提交时发生这种情况，因为在执行按钮的方法时会修改标签中使用的变量。

在这里查看看似相关问题的一些答案，我试着将this.ref.detectChanges()作为方法的最后一行。这没有用。

这里的其他一些答案建议使用ngModel，这就是我现在所处的代码，但这也没有做到。我觉得我错过了一些明显的东西。

Answer 1

实际上这里的主要问题是我们一起使用角度2和流星，两者都在不同的区域。因此，角度不会检测到其区域之外的变化。您可以使用此方法解决此问题。

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双向数据绑定（使用流星）

1 个答案: