(ngModel) не отражается в обработчике событий изменения
В моем приложении, разработанном с использованием Angular 2, при выборе выпадающего списка ngModel обновляет переменную, объявленную в компоненте, но значение не отражается в обработчике событий "change" выпадающего списка.
Вот соответствующий HTML-код.
<div class="modal-body">
<form #wallForm="ngForm" (ngSubmit)="save()" class="wallForm">
<div class="row">
<span class="sr-only">Select Wall and Board</span>
</div>
<div class="row">
{{selectedWall.Id}}
<select [(ngModel)]="selectedWall.Id" name="Wall" (change)="wallSelected()">
<option *ngFor="let wall of walls" value={{wall.Id}}>{{wall.Item.Title}}</option>
</select>
</div>
<div class="row">
class="btn active-element btn-lg width-50" *ngIf="itemAction == '0'">
Copy
</button>
<button type="submit" (click)="save()"
class="btn active-element btn-lg width-50" *ngIf="itemAction == '1'">
Move
</button>
</div>
</form>
</div>
Вот машинопись.
import { Component, ViewChild, ElementRef, OnInit, Input } from "@angular/core";
import { Router } from '@angular/router';
//import { MODAL_DIRECTIVES, BS_VIEW_PROVIDERS } from 'js/ng2-bootstrap/bundles/ng2-bootstrap.umd.js';
import { ModalDirective } from 'ng2-bootstrap/ng2-bootstrap';
@Component({
selector: 'movecopy-item',
templateUrl: 'app/components/forms/componentManagement/movecopyForm.component.html'
})
export class movecopyComponent implements OnInit {
@ViewChild('mcFormModal') modal: ModalDirective;
private currentUser: user;
private itemAction: ITEM_ACTION;
private modalTitle: string;
@Input() component: viewItem;
walls: viewItem[];
selectedWall: viewItem;
constructor(private _contentService: ContentService,
private _alertService: AlertService,
private _router: Router) {
}
ngOnInit(): void {
//Get all the walls for the user.
this.walls = [];
this.selectedWall = new viewItem();
this.loadWalls();
}
private loadWalls() {
this._contentService.getAllWalls()
.subscribe(data => this.wallListReceived(data),
error => this.handleError(error));
}
private wallListReceived(data: any) {
this.walls = data;
}
hide() {
this.modal.hide();
}
private wallSelected(): void {
console.log('Selected wall');
console.log(this.selectedWall.Id);
//get boards for the wall.
this.getWallContent();
console.log(this.selectedWall.Id);
}
{{selectedWall.Id}}
обновляется, но по какой-то причине в методе wallSelected
this.selectedWall.Id
продолжает возвращать 0.
Что я здесь делаю не так? В чем же может быть причина этого? ценность не отражается здесь?