在页面的初始加载中，加载下拉列表后未设置我的SelectedPerson对象

如何解决在页面的初始加载中，加载下拉列表后未设置我的SelectedPerson对象

我有一个示例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块可以解决您的问题。