1

在我的应用程序中，我有一个预先输入（自动完成）。到目前为止，它运行良好，但我发现重复name值存在一些问题。我必须发送并且我id的nametypeahead 建议name值。如果我键入一个name重复的，无论我从预先输入的哪个重复值中选择，它总是发送id列表中的第一个对象。

我怎么知道.find()要搜索选择的值，而不是列表中的第一个？现在，如果我在输入字段中输入“wolny”并按回车，它将传递464. WOLNY例如，即使我单击带有619值的“WOLNY”，它仍然是 pass 464。

我不能id在 typeahead 中建议 '，因为：

  • 项目需要输入名称，而不是 ID
  • 给我的 API 不接受名称

我将 typeahead 用于 ngx-bootstrap 库。这就是 typeahead 的样子（灰色数字是id特定names 的 s）：

在此处输入图像描述

服务 - 提前输入

    searchVehicleId(description?: string) {
    const url = (!description) ? this.defUrl : 'API=' + description;
    return this.http.get(url)
      .map(res => res.json().vehicles);
  }

零件

export class VehicleComponent implements OnInit {

  ngOnInit() {

this.vehicleIdDataSource = Observable.create((observer: any) => {
  this.vehicleService.searchVehicleId(this.vehicleIdAsyncSelected)
    .subscribe((result: any) => {
      observer.next(result);
    })
});
    this.searchQuery = new FormGroup({
      vehiclename: new FormControl('', Validators.required)
    });
  }
  public vehicle: Vehicle[];
  public description: Description[];
  public searchVehicleId: any;

  public vehicleIdDataSource: Observable<any>;
  public vehicleIdAsyncSelected: string = "";

    public searchByVehicleId(searchQuery) {
    this.vehicleService
      .searchVehicleId(searchQuery.value.vehiclename)
      .subscribe(searchQuery => {
        this.description = searchQuery;
        this.searchVehicleId = this.description.find(x => x.id === x.id).id;
        let qwe = this.description.filter(x => x.id === x.id).map(x => x.id);

        console.log(JSON.stringify(this.description));
        console.log("filter(): " + qwe);
        console.log("find(): " + this.searchVehicleId);

        this.vehicleService
          .getVehicleByVehicleId(this.searchVehicleId)
          .subscribe(searchQuery => {
            this.vehicle = searchQuery;
          })
      });

    interface Description {
      vehicle_id: number;
      custom_description: string;
      description: string;
    }

interface Vehicle {
  status: number;
  dallases: Vehicle[];
}

interface VehicleDetails {
  vehicle_id: number;
  dallassettings: string;
  dallasupdated: string;
  dallas_list: DallasList[];
}

interface DallasList {
  number: number;
  auth: number;
}

模板

<input class="form-control" formControlName="vehiclename" [(ngModel)]="vehicleIdAsyncSelected" [typeahead]="vehicleIdDataSource"
  typeaheadMinLenght="2" typeaheadOptionsLimit="10" typeaheadGroupField="id" typeaheadOptionField="description" typeaheadWaitMs="100"
  placeholder="Search">

谢谢

4

0 回答 0