有人可以解释为什么打印显示“2：对象”的选项值吗？答案

【问题标题】：Could some one explain why printing an option value showing "2: Object"?有人可以解释为什么打印显示“2：对象”的选项值吗？
【发布时间】：2019-12-02 08:49:23
【问题描述】：

嗨，目前我已经使用 angular 5 和 typescript 开发了 UI。在我的一个组件中，我有一个反应式表单，在组件视图中，我有选择框表单控件。所以我想要的是每当我从选择框中选择不同的选项时，它应该打印选择的值。所以我在我的组件类中注册了一个函数contactListChanged。

<select formControlName="contactList" [compareWith]="compareResource" (change)="contactListChanged($event)">
<option value="" disabled>{{ 'PLACEHOLDERS.CONTACT_LIST' | translate }}</option>
<option *ngFor="let contactList of contactLists" [ngValue]="contactList">{{ contactList.name }}</option>
</select>

在组件 ts 文件中

  contactListChanged($event){
    let a  = $event.target.value ;
    console.log(a);// prints 1: Object

    console.log(this.contactListControl.value); // prints Object {id: "1", name: "irish msisdn 1", total: 1000, displayName: "irish msisdn 2(1000)"}
  }

console.log(a) 打印值“2：对象”。但是 console.log(this.contactListControl.value);正确打印值。对象{id：“2”，名称：“irish msisdn 2”，总数：1200，displayName：“irish msisdn 2(1200)”}

为什么会出现这种行为？我希望 console.log(a) 打印值对象{id：“2”，名称：“irish msisdn 2”，总数：1200，displayName：“irish msisdn 2(1200)”}

所以我想要的是使用 [ngValue] 并在方法 contactListChanged 中获取所选对象。我怎样才能实现它？

非常感谢您的帮助

谢谢你

【问题讨论】：

可以添加console.log的画面吗？
1: Object Object {id: "1", name: "irish msisdn 1", total: 1000, displayName: "irish msisdn 2(1000)"}

标签： angular typescript

【解决方案1】：

因为您已经在 [ngValue]="contactList" 中绑定了contactList，这就是为什么在contactListChanged($event) 中选择的对象要选择名称将contactList.name 绑定到ngValue，如下所示

<option *ngFor="let contactList of contactLists" [ngValue]="contactList.name">{{ contactList.name }}</option>

如果你只传递字符串，你也可以使用 value。两者之间的唯一区别是 value 总是字符串，在 ngValue 中你可以传递 object。

【讨论】：

【解决方案2】：

重要的是要了解，当您从输入（单选、复选框、选项...）中获取值时，它的值将始终转换为 string 类型。

因为contactList 是一个对象，所以控制台会准确地向您显示它是什么：一个转换为字符串的对象。

因此，如果您希望该值标识您想要的对象，请改用 id [value]="contactList.id"（或指定每个对象的属性）：

<option *ngFor="let contactList of contactLists" [value]="contactList.id">{{ contactList.name }}</option>

然后使用id获取你想要的对象：

contactListChanged($event) {
    let objId  = $event.target.value ;
    console.log(this.contactLists.find(x => x.id == objId));
}

【讨论】：

【解决方案3】：

默认情况下，Javascript 不支持 select 元素的 value 属性中的对象/数组。 Angular 已经使用ngValue 解决了这个问题。当我们对 Angular 中的对象使用 ngValue 时，它会将 select 元素的 Javascript 值设置为 id: Object，其中 id 是所选选项的索引。 Object 是一个纯字符串值。因此，如果您使用纯 Javascript ($event.target.value) 访问所选选项的值，您将收到 1: Object、2: Object 等，具体取决于所选选项。您可以通过将索引映射到选项来访问该对象，但 Angular 已经为您做到了。

相反，您应该使用 Angular 的本机绑定方法（formControl 或 ngModel）访问所选值，因为 Angular 会提取 Javascript 值 (id: Object) 中的索引 (id) 并将其映射到索引select 下拉列表中的选项以获取对象值。

因此访问该值的正确方法是使用formControl 或ngModel 访问选定的值。由于您使用的是响应式表单，因此您已经展示了如何访问该值。

contactListChanged() {
  const selectedValue = this.contactListControl.value;
  console.log(selectedValue);
}

get contactListControl() {
  return this.form.get('contactList');
}

（来源：Angular codebase）

【讨论】：