Question

给出一系列的人：

let people = [...]

我想在Angular中写一个下拉菜单，您可以从列表中选择一个人，然后从生成的输入框中动态更改其姓名。

我有以下代码段：

<select [(ngModel)]="personIndex">
    <option *ngFor="let p of people" [value]="findIndexOfPerson(p.id)">
      {{p.name}}
    </option>
</select>

<input placeholder="Name" 
       [ngModel]="getPersonName()"
       [hidden]="personIndex == null">

在我的组件内：

personIndex = null;

findIndexOfPerson(i) {
    return this.people.findIndex(p => p.id == i) 
}

getPersonName() {
    if (this.personIndex == null || this.personIndex == -1) return null;
    return this.people[this.personIndex]['name'];
}

现在我了解，我无法使用[ngModel]使用getter函数建立双向数据绑定。请注意，如果我更改

[ngModel] =“ getPersonName（）”到[（ngModel）] =“ getPersonName（）”

程序抛出编译器错误。

所以问题是我如何得到想要的东西？如何更改逻辑以允许使用下拉列表和输入框更改人员列表？

Answer 1

我认为您缺少一个会在输入值更改时更改名称的函数。您应该在keyup上监听input事件，并使用$event.target.value调用此方法：

changeNameOfCurrentlySelectedPerson(newName) {
  if(this.personIndex) {
    this.people[this.personIndex].name = newName;
  }
}

这将检查是否从下拉列表中选择了一个人，并相应地更改了姓名。

这是在视图中进行绑定的方式：

<input 
  placeholder="Name" 
  [ngModel]="getPersonName()"
  (keyup)="changeNameOfCurrentlySelectedPerson($event.target.value)"
  [hidden]="personIndex == null">

这是您推荐的Working Sample StackBlitz。

Answer 2

使用[ngValue]绑定选择中的人。使用该人绑定到该人的其他属性。您不需要任何方法。

<select [(ngModel)]="selectedPerson">
  <option selected [ngValue]="null">Select a person</option>
  <option 
    *ngFor="let person of people; let i = index" 
    [ngValue]="person">
    {{person.name}}
  </option>
</select>

<input 
  placeholder="Name" 
  [(ngModel)]="selectedPerson.name"
  *ngIf="selectedPerson">

export class MyComponent {
  people = [....];
  selectedPerson = null;
}

此外，即使您想在*ngFor中查找索引，也可以使用let i = index

即。 <option *ngFor="let p of people; let i = index" [value]="i">

Angular 6-ngModel通过函数建立双向数据绑定

2 个答案: