Angular ReactiveFrom 订阅 valueChanges 给出 [object Object]答案

【问题标题】：Angular ReactiveFrom subscribe on valueChanges gives [object Object]Angular ReactiveFrom 订阅 valueChanges 给出 [object Object]
【发布时间】：2018-06-08 09:34:57
【问题描述】：

我有一个小的 Angular Webform，只有 1 个下拉字段，在我的 component.html 中声明为 formControlName="serviceName".

下拉详情：

    <div class="dropdown">
      <label for="serviceName">Select the Service</label>
      <select class="form-control" formControlName="serviceName" id="serviceName">
        <option *ngFor="let service of srvNames; let i = index" [value]="service">{{ service.ServiceName }}</option>
      </select>
    </div>

在我的组件中，我有一个声明为 srvNames: any[]; 的数组，这个数组是通过对服务的 http 调用来填充的。

用户可以使用下拉菜单并选择不同的值，这些值显示在我的网页中。使用 get('serviceName').valueChanges 和 subscribe 我想跟踪更改。

this.servicesForm.get('serviceName').valueChanges
      .subscribe(
        (value) => {
          console.log(value);
        }
      );

当我 console.log 订阅的值时，我看到我正在返回 [object Object]

但是当我 console.log 我的数组时，我看到了值：

0:{ServiceName: "PhdTimeSeriesVS"}
1:{ServiceName: "Product"}
length:2
__proto__:Array(0)

有人可以帮助我吗？谢谢，利诺

【问题讨论】：

您的代码中有

标签： angular angular-reactive-forms

【解决方案1】：

你正在返回一个对象：

{ServiceName: "PhdTimeSeriesVS"}

在您的选择中，您将该对象作为值传递

<option *ngFor="let service of srvNames; let i = index" [value]="service">

更改它以传递给定键的值：

<option *ngFor="let service of srvNames; let i = index" [value]="service.ServiceName">

【讨论】：