JSON选项值中的角度选择传递

Question

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

我最初有一个下拉列表，用户从三个用户中选择一个：Jack、Nav或Pom

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

---

我在开始时有三个datas，并初始化一个current对象：

datas: Data[] = [
new Data(1, "Jack", "[e-mail]", "123 Main"),
new Data(1, "Nav", "[e-mail]", "324 Murray"),
new Data(1, "Pom", "[e-mail]", "995 Fortran")
];
current: Data = this.datas[0];

选择下拉菜单选择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对象如下：

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

我不喜欢这种方式，因为首先，名字可以是一样的，其次，我觉得一定有更好的方式。

如果可能的话，我希望能够从选择的option传入data对象，这样我就可以执行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>