1

私のアプリでは、先行入力 (オートコンプリート) を使用した入力があります。これまでのところ、うまく機能していますが、値が重複しているという問題が見つかりましたname。送信する必要idnameあり、タイプアヘッドが値を提案しnameます。重複した a を入力すると、タイプnameアヘッドから重複した値を 1 つ選択しても、常にidリストの最初のオブジェクトが送信されます。

.find()リストの最初の値ではなく、選択した値を検索するように指示するにはどうすればよいですか? 今、入力フィールドに「wolny」と入力してEnterキーを押すと、 の464値が渡されますWOLNY。たとえば、「WOLNY」と619値をクリックしても、まだ pass464です。

id次の理由により、先行入力で 's を提案することはできません。

  • プロジェクトはIDではなく名前を入力する必要があります
  • 私に与えられた API は名前を受け入れません

ngx-bootstrap ライブラリに typeahead を使用します。これはタイプアヘッドがどのように見えるかです (灰色の数字はid特定nameの です):

ここに画像の説明を入力

サービス - 先行入力

    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