javascript - 在 Typescript 和 Angular2 中绑定(bind)并获取下拉列表值

Question

这个问题被问了很多次，但无法帮助我解决我的问题。不确定这种方法有什么问题，希望有一些新的“眼睛”

这是我在 HTML 中的下拉列表绑定(bind):我将 programName 绑定(bind)到值和文本属性，它是一个字符串。

<select [ngModel]="selectedObject">
   <option *ngFor="let p of programs" value= {{p.programName}}>
         {{p.programName}}
   </option>
</select>

在我的 .ts 文件中，这是我将默认值绑定(bind)到“select”的操作

 loadData(pList: IProgram[]) {
    this.programs = pList;
    if (this.programs.length > 0) {
        this.selectedObject = this.programs[0];
    }
}

数据绑定(bind)到“select”正确地，

• 但默认值显示为空文本，我需要单击并选择一个值。
• 另一个问题是，当我将下拉列表值从 A 更改为 B 时，“selectedObject”值始终给出“A”而不是“B”。由于它是 [ngModel]，因此需要注意两种方式的绑定(bind)。但是，它没有发生，因为我可能在这里遗漏了一些东西。

有人可以帮助解决这种方法的问题吗？

Answer 1

尝试下面，

<select [(ngModel)]="selectedObject">
   <option *ngFor="let p of programs" 
           [ngValue] = "p"
           [selected]="p.programName == selectedObject.programName"
          >
         {{p.programName}}
   </option>
</select>

检查这个Plunker!!

希望这有帮助!!