问题描述
我有一个示例Angular页面,该页面未在启动时设置绑定的SelectedPerson变量。
页面加载,加载下拉菜单并正确选择了第三个项目(X3),但是未设置绑定的变量{SelectedPerson}。当我手动选择一个项目时,它会起作用。
这是我的代码。您可以在以下位置运行测试。 https://stackblitz.com/edit/personselector1?file=src/app/app.component.ts
HTML
<div>
<select class="form-control" name="PersonSelector" (ngModelChange)="onPersonChange($event)"
[(ngModel)]="SelectedPerson" [compareWith]="byPersonId">
<option *ngFor="let r of lstPerson" [ngValue]="r">{{r.PersonNumber}} - {{r.PersonName}}</option>
</select>
<br><br>
<label>Person ID: {{SelectedPerson.PersonNumber}}</label><br>
<label>Person Number: {{SelectedPerson.PersonNumber}}</label><br>
<label>Person Name: {{SelectedPerson.PersonNumber}}</label><br>
<br>
<button (click)="GetSelected()">Get Selected</button>
<label> Person Name: {{mySelectedMessage}}</label><br>
</div>
TYPESCRIPT
import { Component,VERSION } from '@angular/core';
import { PersonInfo } from './PersonInfo';
@Component({
selector: 'my-app',templateUrl: './app.component.html',styleUrls: [ './app.component.css' ]
})
export class AppComponent
{
//
// Globals
//
mySelectedMessage: any = 'nothing'
lstPerson: any = [];
SelectedPerson: PersonInfo =
{
PersonID: null,PersonNumber: null,PersonName: null
}
//
// Init
//
ngOnInit()
{
this.LoadPersonList();
}
//
// display Selected Person
//
GetSelected()
{
this.mySelectedMessage = this.SelectedPerson.PersonName;
console.log('SelectedPerson',this.SelectedPerson)
}
//
// Load Dropdown
//
LoadPersonList()
{
var temp = [
{ PersonID: 1,PersonNumber: 'X1',PersonName: 'Dave Smith' },{ PersonID: 2,PersonNumber: 'X2',PersonName: 'Tammy Spoon' },{ PersonID: 3,PersonNumber: 'X3',PersonName: 'Rosy Cheeks' },{ PersonID: 4,PersonNumber: 'X4',PersonName: 'Don Key' },];
this.lstPerson = temp;
if (this.lstPerson.length > 1)
{
this.lstPerson.unshift(
{
PersonID: 0,PersonNumber: "- Select a Person",PersonName: ""
})
}
else
{
this.SelectedPerson = this.lstPerson[0];
}
}
//
// byPersonId - For [compareWith] in .html
//
byPersonId(item1: any,item2: any)
{
return item1.PersonID === 3;
}
//
// onPersonChange - Person Selector Change
//
onPersonChange(value)
{
//this.mySelectedMessage = value.PersonName;
console.log("Person Change: ",value);
}
}
PersonInfo
export interface PersonInfo
{
PersonID: number,PersonNumber: string,PersonName: string
}
解决方法
我已经解决了这个问题。工作代码在这里。
https://stackblitz.com/edit/personselectorv2?file=src/app/app.component.ts
,如果我正确理解问题。 LoadPersonList
中的功能this.SelectedPerson = this.lstPerson[0];
将不会执行。删除包装此功能的else块可以解决您的问题。