Angular 角度8，无法通过表单传递值（单击）

对于angular&ts的新手，我非常感谢所有的帮助，并为一个业余问题道歉

我在将自动完成表单中的值存储到变量时遇到问题，并且一直未定义。我想不出解决办法。我希望能够将所选选项存储在变量中，以便稍后在其他函数中调用

这是我的组件HTML

<mat-grid-list cols="1" rowHeight="50px">
<mat-grid-tile>
    <h2>Search job postings:</h2>
    <form>

        <mat-form-field>
            <input type="text" matInput [matAutocomplete]="auto" [formControl]="myControl" />
        </mat-form-field>
        <button (click)="onclick(option)" mat-raised-button color="primary">Search</button>

        <mat-autocomplete role="input" #auto="matAutocomplete"
            [displayWith]="displayFunc">
            <mat-option *ngFor="let option of filterOptions | async" [value]="option">
                {{option}}
            </mat-option>

        </mat-autocomplete>

    </form>
</mat-grid-tile>

搜索职位公告：
搜寻
{{option}}

下面是我的组件。ts

import { Component, OnInit } from '@angular/core';
import { HttpClient } from "@angular/common/http";
import { FormControl } from "@angular/forms";
import { Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';

@Component({
  selector: 'app-jobs',
  templateUrl: './jobs.component.html',
  styleUrls: ['./jobs.component.scss']
})
export class JobsComponent implements OnInit {

  public jobs;
  public options: string[] = [];
  public myControl = new FormControl();
  public filterOptions: Observable<string[]>;
  public chosenJob = "";

  constructor(private http: HttpClient) { }
  ngOnInit() {
    let res = this.http.get("myroutehere");
    res.subscribe(data => {
      this.saveData(data);
    });
    this.filterOptions = this.myControl.valueChanges.pipe(
      startWith(''),
      map(value => (this._filter(value))
      ))
  };

  private _filter(value: string): string[] {
    const filterVal = value.toLowerCase();
    return this.options.filter(option =>
      option.toLowerCase().includes(filterVal)
    );
  };

  saveData(resp) {
    this.jobs = resp.jobs
    console.log(this.jobs)
    this.saveJobTitles(this.jobs)
  };

  saveJobTitles(x) {
    x.map(name => this.options.push(name.data.title))
    console.log(this.options)
  };

  // Fills form out with a string instead of object
  displayFunc(subj) {
    return subj ? subj : undefined;
  };


  onclick(value) {
    this.chosenJob = value
    console.log(this.chosenJob);
    console.log(value)
  };

};

从'@angular/core'导入{Component，OnInit}；
从“@angular/common/http”导入{HttpClient}；
从“@angular/forms”导入{FormControl}”；
从“rxjs”导入{Observable}；
从“rxjs/operators”导入{map，startWith}；
@组成部分({
选择器：“应用程序作业”，
templateUrl:“./jobs.component.html”，
样式URL:['./jobs.component.scss']
})
导出类JobsComponent实现OnInit{
公共工作；
公共选项：字符串[]=[]；
public myControl=new FormControl（）；
公共过滤器选项：可观察；
公共chosenJob=“”；
构造函数（私有http:HttpClient）{}
恩戈尼尼特（）{
让res=this.http.get（“myroutehere”）；
res.subscribe（数据=>{
这是saveData（数据）；
});
this.filterOptions=this.myControl.valueChanges.pipe(
startWith（“”），
映射（值=>（此._筛选器（值））
))
};
private_过滤器（值：string）：string[]{
const filterVal=value.toLowerCase（）；
返回此.options.filter（选项=>
option.toLowerCase（）.includes（filterVal）
);
};
保存数据（resp）{
this.jobs=resp.jobs
console.log（this.jobs）
this.saveJobTitles（this.jobs）
};
保存作业标题（x）{
x、 map（name=>this.options.push（name.data.title））
console.log（this.options）
};
//用字符串而不是对象填充表单
displayFunc（subc）{
返回主题？主题：未定义；
};
onclick（值）{
this.chosenJob=值
console.log（this.chosenJob）；
console.log（值）
};
};

你的代码在我看来很好，我把它复制到stackblitz中，看起来很有效。我看到的唯一问题是，在单击submit按钮事件中，您正在将

选项作为参数传递。该选项将只是单击事件，但与输入字段无关。你不能从那里得到字段的值。
您正在将输入分配给正在创建的FormControl对象，因此可以通过
this.myControl.value
访问它，该值应包含字段的值。
您从未提及选项列表是否正常工作，但我认为它没有任何问题

以下是stackblitz供参考：

您还需要对从请求中接收到的内容进行大量数据操作，并调用多个函数。我认为可以使用RxJS简化，但这是未经测试的代码：

ngOnInit() {
  let res = this.http.get("myroutehere")
    .pipe(
       map(resp => resp.jobs),
    )
    .subscribe(names => this.options = names.map(name => name.data.title));
  ...
};

您可以通过这种方式删除
saveData
和
saveJobTitles
。
在映射中，您必须返回此值。_filter（value）。。。或者去掉它周围的（）谢谢你的帮助David！不客气！也许你可以投票并将其标记为解决方案帕维德！谢谢你抽出时间来帮助我。“this，myControl.value”代替选项正是我所寻找的，并解决了我的问题。非常感谢。