Angular2 ngModel在异步回调后未更新

时间:2016-11-01 10:05:58

标签: angular data-binding

为什么angular2双向数据绑定没有'在这种情况下工作?

<span style="color:white">{{searchLocation}}</span>
<input  name="searchLocation" type="text" placeholder="Search" [(ngModel)]="searchLocation">
<button class="btn btn-outline-success" type="submit" (click)="search()">Search</button>

目标组件是HeaderComponent

export class HeaderComponent implements OnInit {

  searchLocation: string;
  @Output() locationFound: EventEmitter<Position> = new EventEmitter<Position>();

  constructor(private _locationService: LocationService) { }

  ngOnInit() {
     this.searchLocation ="";
  }

  search():void{

    this._locationService.geocodeAddress(this.searchLocation)
        .subscribe((position:Position)=>{
          this.searchLocation ="new value";
          this.locationFound.emit(position);
    });
  }
}

在订阅块之后,searchLocation发生了更改,但视图未更新。

我希望有人可以帮助我

1 个答案:

答案 0 :(得分:3)

      this.searchLocation ="";
  

searchLocation被指定为null。如果存在null,则不会更新DOM。尝试给出一些有效的字符串。