(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.

Что я здесь делаю не так? В чем же может быть причина этого? ценность не отражается здесь?

1 3

1 ответ:

Порядок событий на элементе не определен. Вы не можете ожидать, что ngModel обновит модель до обработки обработчика событий для события change.

Использовать

(ngModelChange)="wallSelected()"

Потому что ngModel испускает только ngModelChange после обновления модели