（ngModel）が変更イベントハンドラに反映されていません

Question

私のアプリケーションでは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

をやっていますか？ここに反映されていない理由は何でしょうか？

Answer 1

要素のイベントの順序は未定義です。 changeイベントのイベントハンドラが処理される前に、ngModelがモデルを更新することは期待できません。

利用代わり

(ngModelChange)="wallSelected()" 

それは私があなたの代わりに質問タイトルに `click`の` change`を意味想定したモデル