html - Nativescript/angular listpicker 不显示数组列表

Question

我正在尝试从服务器获取 JSON 数据，然后在 Nativescript Listpicker 中输出数据。我也在使用 Angular 这是代码。问题是我看不到 Listpicker 中显示的项目。正在使用服务制作 http向服务器请求。订阅用于从服务获取数据。我在下面有一个播放示例。我想知道我做错了什么。是事件绑定吗？

来自服务器的 JSON [{'name':potato},{'name':berries}]

.ts 文件

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(){

  }



}

服务

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 文件

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

标签： htmlangularnativescript

Answer 1

需要对服务使用异步。

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>

下面的工作示例 https://play.nativescript.org/?template=play-ng&id=zthg0B&v=54