Nativescript/angular listpicker does not show array list - html

Question

I am trying to get JSON data from server and then output the data in Nativescript Listpicker.I am also using Angular Here is the code.The problem is I cannot see the items displayed in the Listpicker.A service is being used to make an http request to the server. A subscription is used to get the data from the service. I have a play example below.I would like to know what I am doing wrong. Is it the event binding ?
JSON from server
[{'name':potato},{'name':berries}]
.ts file
import { Component, OnInit, OnDestroy, ChangeDetectionStrategy } from "#angular/core";
import { EventData} from 'tns-core-modules/data/observable';
import { RouterExtensions } from "nativescript-angular/router";
import { BehaviorSubject, Subscription } from "rxjs";
import { request, getFile, getImage, getJSON, getString } from "tns-core-modules/http";
import { Page } from 'ui/page';
import { Output_restaurants_service } from "../services/output_restaurants.service";
#Component({
selector: "item_option",
moduleId: module.id,
templateUrl: "./item_option.component.html",
changeDetection: ChangeDetectionStrategy.OnPush,
styleUrls: ["./item_option.component.css"]
})
export class ItemOption implements OnInit,OnDestroy {
page:Page;
args:EventData;
isLoading: boolean;
value:any;
picked:any;
cool:any;
list =[];
arr = [];
public pokemons: Array<string>;
private curChallengeSub: Subscription;
constructor(private service_men:Output_restaurants_service,page:Page, private router: RouterExtensions){
this.pokemons = [];
}
ngOnInit(){
this.service_men.output_included_sides().subscribe(
(r)=>{
for(let x =0;x<r.length;x++){
this.arr.push(r[x]['name']);
}
this.pokemons = this.arr;
console.log("observer"+ this.pokemons);
}
);
}
public selectedIndexChanged(picker) {
console.log('picker selection: ' + picker.selectedIndex);
this.picked = this.pokemons[picker.selectedIndex];
}
public onSelectedIndexChanged(picker) {
}
ngOnDestroy(){
}
}
Service
import { Injectable } from '#angular/core';
import { Http,Response} from '#angular/http';
import { HttpClient } from '#angular/common/http';
import { BehaviorSubject } from 'rxjs';
import { map,tap,take } from "rxjs/operators";
import { Menu_i} from '~/restaurant_menu/restaurant.model';
import { Observable } from 'tns-core-modules/ui/page/page';
//import { Observable } from "rxjs";
#Injectable({providedIn:'root' })
export class Output_restaurants_service{
shopping_cart=[];
included_side_output:any;
menu_part:any;
menu_rest_items:any;
values:any
servers=[];
men:any;
menu_int= [];
outpuut_restaurants: any;
//response:string[]=[];
Restaurants:string[]=[];
countries: any[];
//http: any;
response = [];
pokemonsarray= [];
//private menuChanged = new Subject(null);
//public products: Observable<Menu[]>
private _currentChallenge = new BehaviorSubject(null);
constructor(private http:HttpClient) {
}
// sides(){
// return this._currentChallenge.asObservable();
// }
output_included_sides(){
this.included_side_output = this.http.get(`https://www.pidequehaypos.com/customer_chooses_food_type/output_specific_sides`);
return this.included_side_output;
}
add_variable_to_session(main_dish_id:string){
return this.http.post(`https://www.pidequehaypos.com/customer_chooses_food_type/store_main_dish_to_session`,{"main_dish_id":main_dish_id});
}
choose_restaurant() {
return this.http.get(`https://www.pidequehaypos.com/customer_chooses_business/output_businesses_button`);
}
post_menu_part_selected(restaurant_number:string){
this.menu_part= this.http.post(`https://www.pidequehaypos.com/customer_chooses_food_type/output_food_type`,{"business_id":restaurant_number});
return this.menu_part;
}
output_restaurant_items(menu_part_name:string){
this.menu_rest_items = this.http.post(`https://www.pidequehaypos.com/customer_chooses_food_type/output_food_and_drink_items`,{"menu_part_name":menu_part_name});
return this.menu_rest_items;
}
public set_restaurants (Rest){
//console.log("rest res"+Rest);
if(Rest["business"]){
// for(let t=0;t<Rest["business"].length;t++){
// this.restaurants.push(Rest["business"][t]["name"]);
// }
}
}
pes(){
//return this.menu.slice();
}
output_menu_items_test(){
return this.http.get<Menu_i>('https://www.pidequehaypos.com/customer_chooses_food_type/output_food_and_drink_items').pipe(take(1),
tap(resData => {
// tslint:disable-next-line:no-unused-expression
resData;
// tslint:disable-next-line: max-line-length
console.log('response from logout server ' + JSON.stringify(resData));
})
);
}
}
html file
<ListPicker #picker
id="pickerid"
class="p-15"
[items]="pokemons"
(selectedIndexChange)="onSelectedIndexChanged($event)">
</ListPicker>

Answer 1

Need to use async with the service.
ngOnInit() {
let items = [];
let subscr;
this.myItems = RxObservable.create(subscriber => {
subscr = subscriber;
subscriber.next(items);
return function () {
console.log("Unsubscribe called!");
};
});
this.service_men.output_included_sides().subscribe(
(r) => {
console.log("result: ", r)
for (let x = 0; x < r.length; x++) {
items.push(r[x]['name']);
subscr.next([...items]);
}
}
);
}
<ListPicker #picker id="pickerid" class="p-15" [items]="myItems | async"
(selectedIndexChange)="onSelectedIndexChanged($event)">
</ListPicker>
working example below
https://play.nativescript.org/?template=play-ng&id=zthg0B&v=54