在我的页面的初始加载中,我的 SelectedPerson 对象在加载下拉列表后未设置
In the initial load of my page my SelectedPerson object is not getting set after the Dropdown is loaded
我有一个示例 Angular 页面,它没有在启动时设置我绑定的 SelectedPerson 变量。
页面加载,加载下拉菜单,select正确设置第 3 项 (X3),但未设置绑定变量 {SelectedPerson}。它在我手动 select 一个项目时有效。
这是我的代码。您可以 运行 测试在..
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>
类型说明
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);
}
}
个人信息
export interface PersonInfo
{
PersonID: number,
PersonNumber: string,
PersonName: string
}
如果我正确理解问题。在 LoadPersonList
函数中 this.SelectedPerson = this.lstPerson[0];
将不会执行。删除包裹这段函数的 else 块可能会解决您的问题。
我已经解决了这个问题。工作代码在这里。
https://stackblitz.com/edit/personselectorv2?file=src/app/app.component.ts
我有一个示例 Angular 页面,它没有在启动时设置我绑定的 SelectedPerson 变量。
页面加载,加载下拉菜单,select正确设置第 3 项 (X3),但未设置绑定变量 {SelectedPerson}。它在我手动 select 一个项目时有效。
这是我的代码。您可以 运行 测试在.. 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>
类型说明
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);
}
}
个人信息
export interface PersonInfo
{
PersonID: number,
PersonNumber: string,
PersonName: string
}
如果我正确理解问题。在 LoadPersonList
函数中 this.SelectedPerson = this.lstPerson[0];
将不会执行。删除包裹这段函数的 else 块可能会解决您的问题。
我已经解决了这个问题。工作代码在这里。
https://stackblitz.com/edit/personselectorv2?file=src/app/app.component.ts