Can someone help me with the code I'm currently working on? I successfully retrieved data from a remote service and it shows in the log, but now the typeahead feature is not displaying options when clicked. Any assistance would be appreciated.
I have searched through various blogs and Stack Overflow questions related to this issue but so far, no solutions have worked.
Below is my code snippet:
TypeScript
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css'],
providers: [HomeServiceService]
})
export class HomeComponent implements OnInit {
title = 'Autocomplete Example in Angular 6';
searchTerm: FormControl = new FormControl();
myDestination = <any>[];
constructor (private service: HomeServiceService){
}
ngOnInit(): void {
this.searchTerm.valueChanges.subscribe(
term => {
if ( term != ''){
this.service.search(term).subscribe(
data => {
this.myDestination = data as any[];
console.log(this.myDestination)
}
)
}
}
)
service.ts
@Injectable()
export class HomeServiceService {
constructor(private httpClient : HttpClient) { }
search(term){
var listOfBooks = this.httpClient.get('http://192.168.88.250:8080/api/v1/searchterminals/?searchTerm=' + term)
.pipe(
debounceTime(500),
map(
(data: any) => {
return (
data.length != 0 ? data as any[] : [{"BookName" : "No Record Found"} as any]
);
}
)
)
return listOfBooks;
}
html
<mat-form-field class="container" >
<input type="text" placeholder="Search destination ..."
matInput
[formControl]="searchTerm"
[matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let destination of this.myDestination.name" [value]="destination.name">
{{ destination.name}}
{{ destination.city.name}}
</mat-option>
</mat-autocomplete>
</mat-form-field>