Angular ReactiveFrom subscribe on valueChanges 给出 [object Object]

Question

我有一个只有 1 个下拉字段的小型 angular 网络表单，它在我的 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 调用来填充的。

用户可以使用下拉菜单和select不同的值，这些值显示在我的网页中。使用 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)

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

Answer 1

您正在返回一个对象：

{ServiceName: "PhdTimeSeriesVS"}

并且在您的 select 中，您将该对象作为值传递

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

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

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

Angular ReactiveFrom subscribe on valueChanges 给出 [object Object]

Angular ReactiveFrom subscribe on valueChanges gives [object Object]

angular

angular-reactive-forms