有人可以解释为什么打印显示"2: Object"的选项值吗？

Question

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

<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)"}
}

控制台.log(a) 打印值"2：对象"。但是控制台.log(this.contactListControl.value);正确打印值。 对象 {id： "2"， 名称： "爱尔兰 msisdn 2"， 总计： 1200， displayName： "爱尔兰 msisdn 2(1200)"}

为什么会有这种行为？ 我希望控制台.log(a) 打印值 对象 {id： "2"， 名称： "爱尔兰 msisdn 2"， 总计： 1200， displayName： "爱尔兰 msisdn 2(1200)"}

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

非常感谢您的帮助

谢谢

Answer 1

默认情况下，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)

Answer 2

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

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

如果只传递字符串，也可以使用 value。两者之间的唯一区别是值始终是字符串，在ngValue中可以传递对象。

Answer 3

重要的是要了解，当您从输入(单选按钮，复选框，选项...)中获取值时，其值将始终转换为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));
}