3

내 응용 프로그램에서 Angular 2를 사용하여 개발 한 드롭 다운 선택시 ngModel은 구성 요소에 선언 된 변수를 업데이트하지만 해당 값은 해당 구성 요소의 "change"이벤트 처리기에 반영되지 않습니다. 쓰러지 다.(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

을하고 있는가? 여기 반영되지 않은 가치에 대한 이유는 무엇일까요?

+0

를 업데이트 한 후 ngModelChange을 방출

대신 사용

(ngModelChange)="wallSelected()" 

때문에 당신이'대신 질문 제목에'click'의 change'을 의미 가정합니다. '클릭 '은 나에게 의미가 없다. –

+0

예 죄송합니다. 나는 실제로 변화를 의미했습니다. – binDebug

답변

1

요소의 이벤트 순서는 정의되지 않습니다. change 이벤트에 대한 이벤트 처리기가 처리되기 전에 ngModel에서 모델을 업데이트 할 것으로 예상 할 수 없습니다. ngModel는이 모델

+1

고마워요! 그게 효과가 있었어. – binDebug