（ngModel）未反映在更改事件处理程序中答案

【问题标题】：(ngModel) not reflecting in change event handler（ngModel）未反映在更改事件处理程序中
【发布时间】：2016-12-29 09:31:56
【问题描述】：

在我使用 Angular 2 开发的应用程序中，在选择下拉列表时，ngModel 会更新组件中声明的变量，但该值不会反映在下拉列表的“更改”事件处理程序中。

这里是相关的 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。

我在这里做错了什么？值未在此处反映的可能原因是什么？

【问题讨论】：

我假设您在问题标题中的意思是 change 而不是 click。 click 对我来说没有意义。
是的，对不起。我确实是指改变。

标签： angular typescript angular-ngmodel angular2-forms angular2-ngmodel

【解决方案1】：

元素上的事件顺序未定义。您不能指望ngModel 在处理change 事件的事件处理程序之前更新模型。

改为使用

(ngModelChange)="wallSelected()"

因为ngModel 仅在更新模型后才发出ngModelChange

【讨论】：