Angular 角度4提交表单错误

我的表格有几个问题。它被设计成一个搜索工具。1个输入，1个按钮，我们开始。但有些事情是不对的。我使用API，当您向它发送字符串时，它会返回包含特定字符串的所有值。发送空值时，它将返回所有可能的值

主要问题是提交表单。根据我得到的代码：

无法读取未定义的属性“值”

_this.form.get不是函数

代码如下：

服务

@Injectable()
export class FleetService {
  private defUrl = 'some.url';

  constructor(private http: Http) { }

  getFleet(fleetname?: string) {
    const url = (!fleetname) ? this.defUrl : 'some.url=' + fleetname;
    return this.http.get(url)
      .map(res => res.json());
  }
}

<form class="form-inline" novalidate (ngSubmit)="search(fleetname)" [formGroup]="searchQuery">
  <div class="form-group">
    <input class="form-control" formControlName="fleetname" type="text" placeholder="Search">
  </div>
  <button class="btn btn-info" type="submit">Search</button>
</form>

<div *ngIf="flota">
  <p-dataTable [value]="flota.fleets">
    <p-header>Search results</p-header>
    <p-column field="id" header="ID" [sortable]="true"></p-column>
    <p-column field="name" header="Name" [sortable]="true"></p-column>
  </p-dataTable>
</div>

组件

export class FleetComponent implements OnInit {

  ngOnInit() {
    this.searchQuery = new FormGroup({
      fleetname: new FormControl('', Validators.required)
    });
  }

  public flota: FleetHead[];
  public searchQuery: FormGroup;

  constructor(private fleetService: FleetService, private router: Router) {
    this.fleetService.getFleet().subscribe(fleet => {
      this.flota = fleet;
    })
  }

  search(searchQuery) {
    this.fleetService
      .getFleet(searchQuery.value.fleetname)
      .subscribe(searchQuery => {
        this.searchQuery = searchQuery;
        this.router.navigate(['/fleet']);
      })
  }

}

interface FleetHead {
  fleets: FleetInfo[];
}

interface FleetInfo {
  id: number;
  name: string;
}

模板

@Injectable()
export class FleetService {
  private defUrl = 'some.url';

  constructor(private http: Http) { }

  getFleet(fleetname?: string) {
    const url = (!fleetname) ? this.defUrl : 'some.url=' + fleetname;
    return this.http.get(url)
      .map(res => res.json());
  }
}

<form class="form-inline" novalidate (ngSubmit)="search(fleetname)" [formGroup]="searchQuery">
  <div class="form-group">
    <input class="form-control" formControlName="fleetname" type="text" placeholder="Search">
  </div>
  <button class="btn btn-info" type="submit">Search</button>
</form>

<div *ngIf="flota">
  <p-dataTable [value]="flota.fleets">
    <p-header>Search results</p-header>
    <p-column field="id" header="ID" [sortable]="true"></p-column>
    <p-column field="name" header="Name" [sortable]="true"></p-column>
  </p-dataTable>
</div>

搜寻
搜索结果

当我使用该模板时，它返回

无法读取未定义的

的属性“值”，当我添加

#fleetname

输入时，它返回：

\u this.form.get不是函数

---

此模板在route

/fleet

上运行，提交时我希望停留在该页面上，但使用更新的值，因此搜索结果可能不同。

您收到错误的原因是什么

无法读取未定义的属性“值”

是因为您在提交中传递的值不正确，它应该是：

(ngSubmit)="search(searchQuery)"

要在您的功能中做到这一点：

this.fleetService
  .getFleet(searchQuery.value.fleetname)
     .subscribe(...)

您也不需要在此处使用路由器导航，因此请删除此项：

this.router.navigate(['/fleet']);

在执行搜索后，值应该得到更新：）从我看到的情况来看，您不想将值保存到变量

searchQuery

，而是保存到显示结果的变量

flota

，因此您的函数不应该是这样的：

search(searchQuery) {
  this.fleetService
    .getFleet(searchQuery.value.fleetname)
    .subscribe(searchQuery => {
      this.flota = searchQuery;
    })
}

这是一个

---

使用相同的设置，但我们使用的是omdbapi:）

按预期工作。再次感谢你：）很高兴听到！再次欢迎你：祝你今天愉快