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

Question

[我正在尝试创建一个带有名称的angular表单，将其传递给URL，然后返回.json文件的一部分。我不知道为什么网址没有得到更新。

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

  constructor(
    private scheduleService: ScheduleService,
    private route: ActivatedRoute
    ) { }

  ngOnInit() {}
    processForm(engineer: string) {
      this.route.params.subscribe(params=> { const engineer = params["engineer"];
      this.scheduleService.getschedule(engineer).subscribe(engineer => this.engineer = engineer);
    });
  }
}

服务：

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

据我所知，当我点击提交时，流程表单功能应将工程师变量发送到组件，在组件中将其设置为提供给服务的参数，该服务应填写URL。但是，不管我如何使用它，工程师始终会以未定义的方式返回。显然，我缺少传递变量的核心要素。

而且，我是超级新手，因此该代码中可能还有其他丑陋或并非最佳实践的东西，请随时尝试，我认为我的理解只会有所提高。

Answer 1

如果您的数据来自表单，则无需订阅激活的网址。您必须从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>

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

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