Проблема с привязкой к Angular2 twoway

Question

Я пытаюсь связать элемент управления input с объектом масштабирования карты управления третьей стороной в двухстороннем способе привязки данных (вход должен всегда показывать текущий уровень масштабирования, и если пользователь меняет его, карта должна приближаться к этому уровню)

В настоящее время он работает только в одном направлении: изменения в поле ввода не применяются к карте.

@Component({ 
    selector: 'map-view', 
    template: '<div id="mapView"></div><input [(value)]=zoom />' 
}) 
export class MapViewComponent { 
    view: any = null; 

    public zoom: number = 10; 


    constructor(private _mapService: SimpleMapService, private elRef: ElementRef) { 
    } 

    ngOnInit() { 
     this.view = new MapView({ 
      container: this.elRef.nativeElement.firstChild, 
      map: this._mapService.map, 
      zoom: this.zoom, 
      center: [10.44, 42.947974]   
     }) 

     this.view.watch('zoom', function(newVal, oldVal, propertyName) { 
      this.zoom = newVal; 
     }.bind(this));  

    } 

} 

EDIT: Поэтому я добавил

<input [(ngModel)]="zoom" (ngModelChange)="updateZoom($event)"> на вход

и

updateZoom(newValue) { 
    this.view.zoom = newValue; 
} 

компоненту

и это, кажется, работает. Но действительно ли это так, как это должно быть сделано? В Angular1 он работал с $scope.$apply без каких-либо событий.

Answer 1

Попробуйте следующее <input [(value)]="zoom"; // < ----- добавлены двойные кавычки вокруг увеличения

ИЛИ

Что об использовании <input [(ngModel)]="zoom" >?