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

Posted 2023-02-22

【中文标题】选择表单控件在 Angular 7 中返回 [object Object]

【英文标题】：Select Form Control returns [object Object] in Angular 7

【发布时间】：2019-06-10 22:24:01

【问题描述】：

在我的 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**

    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);
      
    

【参考方案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)
       
    )

【讨论】：

如果我想将整个 jobType 对象存储为值，但仍然不想获取 [Object, Object] 怎么办？

知道了！我需要使用 [ngValue] 而不是 [value]。