Angular select 传入 JSON 选项值

Question

这是我的项目的链接： https://stackblitz.com/edit/angular-ivy-scycva?file=src/app/form/form.component.ts

我最初有一个下拉菜单，用户在其中选择三个用户之一： Jack、Nav 或 Pom

选择用户x后，下面会显示x的详细信息。

---

我一开始有三个datas ，初始化一个current的object：

  datas: Data[] = [
    new Data(1, "Jack", "jack@gmail.com", "123 Main"),
    new Data(1, "Nav", "nav@gmail.com", "324 Murray"),
    new Data(1, "Pom", "pom@gmail.com", "995 Fortran")
  ];

  current: Data = this.datas[0];

select 下拉列表选择current.name作为默认值。 选项是datas中的对象列表，我们显示data.name属性：

<select
  id="person"
  class="form-control"
  [ngModel]="current.name"
  #selectRef
  (change)="updateSelect(selectRef.value)">
  
  <option *ngFor="let data of datas" id="{{data.name}}" [value]="data.name">{{ data.name }}</option>
</select>

以下是表单中的一组输入，其中应包含有关所选人员的数据：

<form #userForm="ngForm">
    <div class="form-group">
        <label>Name</label>
        <input type="text" class="form-control" name="name" [ngModel]="current.name">
    </div>

    <div class="form-group">
        <label>Email</label>
        <input type="text" class="form-control" name="email" [ngModel]="current.email">
    </div>

</form>

---

当前，当发生更新时，我将current的 object 更改如下：

  updateSelect(event) {
    this.current = this.datas.filter(d => d.name == event)[0];
  }

我不喜欢这种方式，因为首先，名称可以相同，其次，我觉得必须有更好的方法。

如果可能的话，我希望能够从选择的option中传递data object ，所以我可以这样做this.current = data ，但我不知道这是否可能。 我也不想在用户不应该看到的option字段上公开任何类似id的内容。

Answer 1

此处修改https://stackblitz.com/edit/angular-ivy-v1pjhn?file=src%2Fapp%2Fform%2Fform.component.html

以前的

<select
  id="person"
  class="form-control"
  [ngModel]="current.name"
  #selectRef
  (change)="updateSelect(selectRef.value)"
  >
  <option *ngFor="let data of datas" id="{{data.name}}" [value]="data.name">{{ data.name }}</option>
</select>

现在

<select
  id="person"
  class="form-control"
  [(ngModel)]="current"
  >
  <option *ngFor="let data of datas" [ngValue]="data">{{ data.name }}</option>
</select>