首页 文章

(ngModel)没有反映在更改事件处理程序中

提问于
浏览
3

在我使用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 .

我在这做错了什么?可能是什么原因导致 Value 没有反映在这里?

1 回答

  • 1

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

    请改用

    (ngModelChange)="wallSelected()"
    

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

相关问题