Listpicker not updating

Environment Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project): "@angular/animations": "8.2.8", "@angular/common": "8.2.8", "@angular/compiler": "8.2.8", "@angular/core": "8.2.8", "@angular/forms": "8.2.8", "@angular/http": "8.0.0-beta.10", "@angular/platform-browser": "8.2.8", "@angular/platform-browser-dynamic": "8.2.8", "@angular/router": "8.2.8", "@progress-nativechat/nativescript-nativechat": "2.0.4", "kinvey-nativescript-sdk": "4.2.3", "nativescript-accelerometer": "2.0.1", "nativescript-angular": "8.2.1", "nativescript-background-http": "4.2.0", "nativescript-camera": "4.5.0", "nativescript-geolocation": "5.1.0", "nativescript-image": "2.2.5", "nativescript-imagepicker": "7.1.0", "nativescript-intl": "3.0.0", "nativescript-iqkeyboardmanager": "1.5.1", "nativescript-social-share": "1.5.2", "nativescript-theme-core": "1.0.6", "nativescript-ui-autocomplete": "5.1.1", "nativescript-ui-calendar": "5.0.0", "nativescript-ui-chart": "6.0.0", "nativescript-ui-dataform": "5.1.1", "nativescript-ui-gauge": "5.0.0", "nativescript-ui-listview": "7.1.0", "nativescript-ui-sidedrawer": "7.0.2", "nativescript-vue": "2.4.0", "react": "16.10.1", "react-hot-loader": "4.12.14", "react-nativescript": "0.12.0", "reflect-metadata": "0.1.13", "rxjs": "6.5.3", "rxjs-compat": "6.5.3", "tns-core-modules": "6.1.1", "zone.js": "0.10.2"

Describe the bug

The problem is the listpicker is not updating with a new array from the service response. In order to get a response array from the server you need to click in the following order. First click on on " Libros AC", then click on "Especial del Dia ", and finally click on "Pernil al Horno" . An array is outputted by the server and received by a function in the service called"output_included_sides". Then a subscription in the .ts file updates the listpicker, which is not happening. I only can see a 0 in the view and that is it. To Reproduce

--html <ListPicker #picker id="pickerid" class="p-15" [items]="pokemons" (selectedIndexChange)="onSelectedIndexChanged($event)">

----.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('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)); }) ); }

----.ts //import { Page} from "tns-core-modules/ui/page"; import { Component, OnInit,OnDestroy,ChangeDetectionStrategy}from "@angular/core"; //import { Output_restaurants_service } from "~/services/output_restaurants.service"; 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";

class DataItem { constructor(public name: string) { } } //included_sides:Observable; @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 { // public years: any; page:Page; args:EventData; viewModel:any; isLoading: boolean; value:any; picked:any; cool:any; list =[]; arr = []; public myItems:any;

// RxObservable; public pokemons: Array; private curChallengeSub: Subscription;

constructor(private service_men:Output_restaurants_service,page:Page, private router: RouterExtensions){

this.pokemons = []; } public selectedIndexChanged(picker) { console.log('picker selection: ' + picker.selectedIndex); this.picked = this.pokemons[picker.selectedIndex]; } ngOnInit(){ this.service_men.output_included_sides().subscribe( (r)=>{ for(let x =0;x<r.length;x++){ this.arr.push(r[x]['name']); // this.arr.push(); }

this.pokemons = this.arr; console.log("observer"+ this.pokemons);
} );

// console.log("here is the array"+this.list);

//this.years.subscribe();

public onSelectedIndexChanged(picker) { //console.log('picker selection: ' + picker.selectedIndex); /// this.picked = this.years[picker.selectedIndex]; }

ngOnDestroy(){

}

//} } ` Expected behavior

Sample project

https://play.nativescript.org/?template=play-ng&id=zthg0B&v=50 Additional `context```

NativeScript / nativescript-angular

Listpicker not updating #2030