在我使用 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。wallSelected
this.selectedWall.Id
我在这里做错了什么?此处未反映该值的原因可能是什么?