Javascript Angular 6表单未将变量传递给URL

我试图用angular创建一个表单，它接受一个名称，将其传递到URL，并返回.json文件的一部分。我不明白为什么url没有更新

HTML：

<form (ngSubmit)="processForm($engineer)">
         <div class="form-group">
            <label for="engineerselectform">Engineer Name</label>
            <select class="form-control" id="engineerselectform" name="engineer" [(ngModel)]="engineer">
            <option></option>
            <option>Smith</option>
            <option>Jones</option>
            <option>Clark</option>
        </select>
    </div>

    <input class="btn btn-primary" type="submit" value="submit"  aria-pressed="true">
</form>

服务：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class ScheduleService {
  apiUrl ='http://127.0.0.1:5000/schedule'
  engineer;

  constructor(private http: HttpClient) { }

  getschedule(engineer: string){
    return this.http.get(`${this.apiUrl}?engineer=${this.engineer}`);
  }
}

Flask API后端：

@app.route('/schedule', methods = ['GET'])
def engineer_location_api():
    if "engineer" in request.args:
        print ('did this')
        engineer_name = request.args["engineer"]
        print ("engineer name:", engineer_name)
    else:
        return "not found, sorry"

    answer = {}
    with open(LOC1, "r") as file:
        check_loc1 = json.load(file)
        for item in check_loc1["LOC1"]:
            if engineer_name in item["Engineer"]:
                answer.update(item)
            else:
                continue
    with open(LOC2, "r") as file:
        check_loc2 = json.load(file)
        for item in check_loc2:
            if engineer_name in item:
                answer.update(item)
            else:
                continue

    if answer:
        return answer
    else:

        return 'engineer not found'

app.run()

错误：

ERROR 
Object { headers: {…}, status: 200, statusText: "OK", url: "http://127.0.0.1:5000/schedule?engineer=undefined", ok: false, name: "HttpErrorResponse", message: "Http failure during parsing for http://127.0.0.1:5000/schedule?engineer=undefined", error: {…} }
core.js:6014:19

据我所知，当我点击submit时，process form函数应该将engineer变量发送到组件，在组件中它将其设置为一个参数，并提供给服务，该服务应该填写URL。但不管我如何处理它，工程师总是以未定义的方式返回。显然，我缺少传递变量的核心部分

---

另外，我是一个非常新的人，因此在这段代码中可能还有其他一些东西是丑陋的或不是最佳实践，请随意翻阅，我想我的理解只能提高。

如果你的数据来自表单，你不必订阅激活的url。您必须从processForm中删除$event，因为我们将在您的服务函数中添加全局变量。请看下面的例子

<form (ngSubmit)="processForm()">
         <div class="form-group">
            <label for="engineerselectform">Engineer Name</label>
            <select class="form-control" id="engineerselectform" name="engineer" [(ngModel)]="engineer">
            <option></option>
            <option value="smith">Smith</option>
            <option value="jones">Jones</option>
            <option value="clark">Clark</option>
        </select>
    </div>

    <input class="btn btn-primary" type="submit" value="submit"  aria-pressed="true">
</form>

---

现在可以通过getSchedule（）函数的参数访问工程师。

感谢您的响应！我对您提交的内容进行了更改，特别是对processForm（）和表单标记本身进行了更改，得到了相同的错误代码。我不确定这是否值得注意，但在这一行：

private route:ActivatedRoute

我收到一条消息：“声明了属性'route'，但它的值从未读取ts（6138）”嗨，我刚刚编辑了我答案的HTML部分。我犯了一个愚蠢的错误。我没有赋予期权价值。更新的代码是

Smith

在我的HTML中添加了值，同样的错误。我重新编译了代码，只是为了确保没有任何缓存导致问题。另一点需要注意的是，在

getschedule（engineer:string）

中的schedule.service.ts文件中，engineer还注意到它已声明但从未读取，但是如果我删除它，则会导致schedule.component.ts出错。schedule.service中的构造函数中是否需要另一个声明？是的，您是对的，在getSchedule（）方法中从未读取过engineer。尝试从getSchedule函数将this.engineer更改为engineer。请检查更新后的答案。就是这样！非常感谢你。

<form (ngSubmit)="processForm()">
         <div class="form-group">
            <label for="engineerselectform">Engineer Name</label>
            <select class="form-control" id="engineerselectform" name="engineer" [(ngModel)]="engineer">
            <option></option>
            <option value="smith">Smith</option>
            <option value="jones">Jones</option>
            <option value="clark">Clark</option>
        </select>
    </div>

    <input class="btn btn-primary" type="submit" value="submit"  aria-pressed="true">
</form>

import { Component, OnInit } from '@angular/core';
import { ScheduleService } from '../schedule.service';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-schedule',
  templateUrl: './schedule.component.html',
  styleUrls: ['./schedule.component.scss']
})
export class ScheduleComponent implements OnInit {
  engineer;
  receivedEngineers;
  constructor(
    private scheduleService: ScheduleService,
    private route: ActivatedRoute
    ) { }

  ngOnInit() {}
    processForm() {
      this.scheduleService.getschedule(this.engineer).subscribe(engineer => this.receivedEngineers = engineer);
    });
  }
}

 getschedule(engineer: string){
    return this.http.get(`${this.apiUrl}?engineer=${engineer}`);
  }