3

在我使用 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}}中的某种原因，不断返回 0。wallSelectedthis.selectedWall.Id

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

4

1 回答 1

1

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

改为使用

(ngModelChange)="wallSelected()"

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

于 2016-12-29T09:34:57.863 回答