javascript - 更改值后 Angular 2 不更新 View

Question

给定以下 Angular 2 代码找到当前位置并转换为人类可读的字符串 -> 绑定(bind)到输入元素:

html 模板:

<input name="myAddr" [(ngModel)]="form.address" type="text">
<button (click)="findMyLocation()" class="ui location right blue icon button">
  <i class="marker icon"></i>
</button>

Angular 2 代码:

form: {
    volume: number,
    thickness: number,
    density: number,
    address: string
  } = { address: '', volume: 0, thickness: 100, density: 300 };

findMyLocation(){
    $('.location').addClass('loading');
    navigator.geolocation.getCurrentPosition(position => {
      this.geocoder.geocode({location: { lat: position.coords.latitude, lng: position.coords.longitude }}, (results, status)=>{
        if(status == 'OK')
          if(results[0]){
            $('.location').removeClass('loading');
            console.log('Addr: ' + results[0].formatted_address);
            this.form.address = results[0].formatted_address;
          }
      })
    }, fail => {
      console.log(fail);
    });
  }

但是，当我单击按钮时，位置(lat，lng)被转换为人类可读的地址，我可以看到输出到控制台。但输入元素不会改变。如果我再次单击按钮，元素将按应有的方式更新。伙计们发生了什么事？

Answer 1

因为 navigator.geolocation.getCurrentPosition 是异步函数，你必须使用 ngZone.run 让 angular 重新渲染模型。

this.ngZone.run(function() {
  this.form.address = results[0].formatted_address;
};)

注意:您必须在构造函数中导入 NgZone 和 inject。

UPD:据我所知有两种方法:

• ngZone.run()
• ChangeDetectorRef.detectChanges()