无法将对象作为元素值访问

Question

我正在创建注册表单。因此，在某些时候，用户必须从我从网络服务获得的城市列表中选择他居住的地方。

现在，有两个（或更多）城市同名的机会，所以网络服务也给了我一个对应于每个城市的唯一 ID。

我创建了一个 select 元素并用我从网络服务中获得的城市填充它的选项，将唯一 ID 设置为选项的值，到目前为止一切顺利（不要介意管道，它只需按字母顺序排列选项）。

.html 文件:

<select
 class="form-control"
 formControlName="province"
 id="province"
 (change)="loadCities($event.target.value)">
   <option *ngFor="let item of provinces | sortBy:'asc':'name'" [value]="item.id">{{ item.name }}</option>
</select>

现在我遇到的问题是，在注册过程结束时，我需要向用户显示一个摘要。我的表单中存储了城市的唯一 ID，但我不想给他看 ID，我想给他看 name （他不能用这个ID做任何事情，他甚至不知道这个ID是哪个城市的）。

所以我尝试将对象（看起来像 {id: 10, name: 'Rapid Rivers' }）设置为选项的值，而不仅仅是 ID：

.html 文件:

<select
 class="form-control"
 formControlName="province"
 id="province"
 (change)="loadCities($event.target.value)">
   <option *ngFor="let item of provinces | sortBy:'asc':'name'" [ngValue]="item">{{ item.name }} 
   </option>
</select>

但是，当我尝试从我的 loadCities() 函数访问对象时，如下所示：

.ts 文件:

loadCities(selectedValue) {
   console.log('city id: ' + selectedValue.id);
   console.log('city name: ' + selectedValue.name);
}

我得到这个:

为什么不直接向 Web 服务询问城市名称，提供您可能认为的 ID，因为我也尝试过该解决方案...
Web 服务不允许我通过提供其 ID 来请求城市名称，而且我无法修改它，因为我无权访问它。所以我想知道在创建下拉列表时如何为选项值设置两个值（名称和 ID）？我以后如何访问这些值，以显示 ID 或城市名称，但不能同时显示两者？

或者你能为我的问题想出更好的解决方案吗？我知道我现在可能想多了，但我的大脑刚刚停止工作

我正在使用响应式表单。

Answer 1

这样可以，看来你用的是反应式

ngOnInit() {
  this.myForm = this.formBuilder.group({
    name: 'province',
  });

  this.onChanges();
}

onChanges(): void {
  this.myForm.get('province').valueChanges.subscribe(selectedValue => {
    console.log('city id: ' + selectedValue.id);
    console.log('city name: ' + selectedValue.name);
  });
}

无法将对象作为元素值访问

Can't access an object as an element value

typescript

angular

angular-reactive-forms