Posted 19 June 2018, 5:42 am EST
I have problem selecting a particular item in the auto complete. It seems like it works when the object list is in the client side but always select the first one when the object list is the server side. The following are the source code for each components. Let me know if I am doing anything wrong. I am using wijmo 5.20181.462 and install it using “npm install wijmo”
app.component ==============
// src/app/app.component.ts
import { Component } from '@angular/core';
import { DataService} from "../services/data.service";
// import Wijmo components
import {WjAutoComplete, WjInputNumber} from 'wijmo/wijmo.angular2.input';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers:[DataService]
})
export class AppComponent {
title = 'Wijmo Starter App';
itemlist: any[];
itemList2: any[];
constructor(private dataService: DataService){
this.dataService.getData()
.subscribe((data: any) =>{
this.itemlist = data;
});
this.itemList2=[
{"gdpm": 57825, "country": "Luxembourg", "gdpcap": 102708, "id": 1, "popk": 563},
{"gdpm": 664005, "country": "Switzerland", "gdpcap": 80602, "id": 2, "popk": 8238}
];
}
}
app.component.html
<!-- The content below is only a placeholder and can be replaced. -->
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
</div>
<h2>Here are some Wijmo controls to help you start:</h2>
<wj-auto-complete [itemsSource]="itemlist"
[selectedValuePath]="'country'"
[displayMemberPath]="'country'"
[selectedValue]="'Switzerland'">
</wj-auto-complete>
<wj-auto-complete [itemsSource]="itemList2"
[selectedValuePath]="'country'"
[displayMemberPath]="'country'"
[selectedValue]="'Switzerland'">
</wj-auto-complete>
data.service.ts
import { Injectable } from '@angular/core';
import { HttpClient,HttpHandler } from '@angular/common/http';
@Injectable()
export class DataService {
constructor(private http: HttpClient) { }
getData(){
return this.http.get("http://www.json-generator.com/api/json/get/cfFvxGrIrS");
}
}
