Angular2 ngModelが非同期コールバック後に更新されない

Question

なぜangle2双方向データバインディングがこのシナリオで機能しないのですか？

<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変化をブロック購読が、ビューが更新されません。

私は誰かがsearchLocationがヌルに割り当てられている

Answer 1

 this.searchLocation =""; 

私を助けることができると思います。 nullが存在する場合、DOMは更新されません。有効な文字列を与えてみてください。