私のアプリでは、先行入力 (オートコンプリート) を使用した入力があります。これまでのところ、うまく機能していますが、値が重複しているという問題が見つかりましたname
。送信する必要id
がname
あり、タイプアヘッドが値を提案し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">
ありがとう