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

Question

我有一个示例 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
}

Answer 1

如果我正确理解问题。在 LoadPersonList 函数中 this.SelectedPerson = this.lstPerson[0]; 将不会执行。删除包裹这段函数的 else 块可能会解决您的问题。

Answer 2

我已经解决了这个问题。工作代码在这里。

https://stackblitz.com/edit/personselectorv2?file=src/app/app.component.ts

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

In the initial load of my page my SelectedPerson object is not getting set after the Dropdown is loaded

javascript

html

angular

data-binding

html.dropdownlistfor