Angular 选择表单控件返回角度为7的[object]

在Angular 7项目中，我有一个带有

select

和

*ngFor

块的被动表单。ngFor值根据选项中的选定值进行过滤，自定义管道负责过滤。每当我从选项中选择一个值时，我看到的都是输出。我尝试了

（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**

import {Component, OnChanges, OnInit, SimpleChanges} from '@angular/core';
import {JobsService} from './services/jobs.service';
import {SERVER_API_URL} from '../../app.constants';
import {Observable} from 'rxjs';
import {Job} from './model/job';
import {FormControl, FormGroup} from '@angular/forms';
import {JobType} from './model/job-type';

@Component({
  selector: 'app-jobs-list',
  templateUrl: './jobs-list.component.html',
  styleUrls: ['./jobs-list.component.css']
})

export class JobsListComponent implements OnInit
{
  jobsObservable: Observable<Job[]>;
  jobTypeObservable: Observable<JobType[]>;
  page: number = 1;

  jobsForm = new FormGroup({
    jobTypeControl: new FormControl({value: '', disabled: false})
  });

  //this.form.controls['jobTypeControl'].value
  //jobsForm.get('jobTypeControl').value
  constructor(private jobsService: JobsService) {
  }

  ngOnInit()
  {

    this.getAllJobTypes();
    this.getAllJobs();
  }

  getAllJobs() {
    let url = SERVER_API_URL + 'jobs/all';

    this.jobsService.getAllJobs(url).subscribe(
      data => {
        // @ts-ignore
        this.jobsObservable = data;
      },
      error => console.error('Failed to retrieve values from backend, error=> ' + error),
      () => console.log('Jobs retrieved from backend'));
    return this.jobsObservable;
  }

  getAllJobTypes() {
    let url = SERVER_API_URL + 'jobtypes/all';

    this.jobsService.getAllJobTypes(url).subscribe(
      data => {
        // @ts-ignore
        this.jobTypeObservable = data;
      },
      error => console.error('Failed to retrieve values from backend, error=> ' + error),
      () => console.log('Job Types retrieved from backend'));
    return this.jobTypeObservable;
  }

  jobsDataAvailable() {
    return this.jobsObservable !== undefined;
  }


  updateFilterValue(event)
  {
    console.log("Emitted Value "+event);
  }
}

BCMC网络安全工作
工作类型：
{{jobType.name}
{{job.title}
{{job.city}，{{job.state}
此文本将在将来被清除值替换

自定义过滤器：

<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**

import {Component, OnChanges, OnInit, SimpleChanges} from '@angular/core';
import {JobsService} from './services/jobs.service';
import {SERVER_API_URL} from '../../app.constants';
import {Observable} from 'rxjs';
import {Job} from './model/job';
import {FormControl, FormGroup} from '@angular/forms';
import {JobType} from './model/job-type';

@Component({
  selector: 'app-jobs-list',
  templateUrl: './jobs-list.component.html',
  styleUrls: ['./jobs-list.component.css']
})

export class JobsListComponent implements OnInit
{
  jobsObservable: Observable<Job[]>;
  jobTypeObservable: Observable<JobType[]>;
  page: number = 1;

  jobsForm = new FormGroup({
    jobTypeControl: new FormControl({value: '', disabled: false})
  });

  //this.form.controls['jobTypeControl'].value
  //jobsForm.get('jobTypeControl').value
  constructor(private jobsService: JobsService) {
  }

  ngOnInit()
  {

    this.getAllJobTypes();
    this.getAllJobs();
  }

  getAllJobs() {
    let url = SERVER_API_URL + 'jobs/all';

    this.jobsService.getAllJobs(url).subscribe(
      data => {
        // @ts-ignore
        this.jobsObservable = data;
      },
      error => console.error('Failed to retrieve values from backend, error=> ' + error),
      () => console.log('Jobs retrieved from backend'));
    return this.jobsObservable;
  }

  getAllJobTypes() {
    let url = SERVER_API_URL + 'jobtypes/all';

    this.jobsService.getAllJobTypes(url).subscribe(
      data => {
        // @ts-ignore
        this.jobTypeObservable = data;
      },
      error => console.error('Failed to retrieve values from backend, error=> ' + error),
      () => console.log('Job Types retrieved from backend'));
    return this.jobTypeObservable;
  }

  jobsDataAvailable() {
    return this.jobsObservable !== undefined;
  }


  updateFilterValue(event)
  {
    console.log("Emitted Value "+event);
  }
}

从“@angular/core”导入{Pipe，PipeTransform}；
@烟斗({
名称：“stringFilter”
})
导出类StringFilterPipe实现PipeTransform
{
转换（值：string[]，filterValue:any）
{
如果（！filterValue | | filterValue==“”）
{
返回值；
}
返回值.filter（item=>-1{
//@ts忽略
this.jobsObservable=数据；
},
error=>console.error（'未能从后端检索值，error=>'+error），
（）=>console.log（'从后端检索的作业'）；
返回此.jobsObservable；
}
getAllJobTypes（）{
让url=SERVER_API_url+“作业类型/all”；
this.jobsService.getAllJobTypes（url）.subscribe(
数据=>{
//@ts忽略
this.jobTypeObservable=数据；
},
error=>console.error（'未能从后端检索值，error=>'+error），
（）=>console.log（'从后端检索的作业类型'）；
返回此.jobTypeObservable；
}
jobsDataAvailable（）{
返回this.jobsObservable！==未定义；
}
updateFilterValue（事件）
{
console.log（“发出的值”+事件）；
}
}

两件事

第一：在你的选择中你有

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

---

如果我想将整个jobType对象存储为值，但仍然不想获取[object，object]？明白了！我需要使用[ngValue]而不是[value]。