选择表单控件在 Angular 7 中返回 [object Object]

Question

在我的 Angular 7 项目中，我有一个带有select和*ngFor块的反应形式。ngFor 值根据从选项中选择的值进行过滤，自定义管道负责过滤。每当我从选项中选择一个值时，我看到的都是"[object Object]"输出。我试过了(ngModelChange)=fun()，change事件。他们没有工作。

形式：

    <div class="container container-fluid">
      <h3 style="text-align: center"> BCMC CyberSecurity Jobs</h3>
      <form [formGroup]="jobsForm">
      <div class="row" style="margin-top: 40px">
        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            <label> Job Type:
              <select class="custom-select" formControlName="jobTypeControl" (ngModelChange)="updateFilterValue($event)">
                <option *ngFor="let jobType of jobTypeObservable" [value]="jobType"> {{jobType.name}}</option>
              </select>
            </label>
        </div>
    
        <div *ngIf="jobsDataAvailable()" class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
          <div class="has-text-centered">
            <pagination-controls (pageChange)="page = $event" class="my-pagination" directionLinks="true" maxSize="5"
                                 nextLabel="" previousLabel=""></pagination-controls>
          </div>
        </div>
      </div>
    
      <div *ngIf="jobsDataAvailable()">
        <div *ngFor="let job of (jobsObservable) | stringFilter: this.jobsForm.controls['jobTypeControl'].value  | paginate: { itemsPerPage: 10, currentPage: page }" class="row" style="margin-top: 10px">
          <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <div class="card">
              <div class="card-body">
                <h5 class="card-title">{{job.title}}</h5>
                <h6 class="card-subtitle mb-2 text-muted">{{job.city}}, {{job.state}}</h6>
                <p class="card-text">This text will be replaced by clearance value in future</p>
                <a class="btn btn-primary" href="https://bcmcllc.applytojob.com/apply/{{job.board_code}}">View and Apply</a>
              </div>
            </div>
          </div>
        </div>
      </div> <!-- End of ngIf-->
      </form>
    
    </div>

自定义过滤器：

     import {Pipe, PipeTransform} from "@angular/core";
        @Pipe({
          name: 'stringFilter'
        })
        export class StringFilterPipe implements PipeTransform
        {
          transform(value: string[], filterValue: any)
          {
            if (!filterValue || filterValue === '')
            {
              return value;
            }
            return value.filter(item => -1 < item.toLowerCase().indexOf(filterValue.toLowerCase()));
          }
        }

**JobsListComponent**

**JobsListComponent**

Answer 1

两件事情。

第一：在你的选择中你有

    <option *ngFor="let jobType of jobTypeObservable" [value]="jobType"> 
          {{jobType.name}}
    </option>

因此，该值是 jobType 类型的对象。您可以使用，例如。如果您的 jobType 有一个名为“id”的属性 [value]=jobType.id

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

因此，您在函数中收到了“id”，而不是整个对象。

第二：在反应式表单中，通常您订阅值更改 - 它不被使用（更改） - 然后，在创建表单之后

    jobsForm.get('jobTypeControl').valueChanges.subscribe(value=>
       { //here you has the value of jobTypeControl
          console.log(value)
       }
    )