Nativescript+Angular中ListPicker无法显示数组列表问题排查

Let's break down why your ListPicker isn't showing items and fix it step by step. The main culprit here is likely the ChangeDetectionStrategy.OnPush you're using, combined with how you're updating your data asynchronously.

Key Issues & Fixes #

1. Change Detection with OnPush #

When you set changeDetection: ChangeDetectionStrategy.OnPush, Angular only updates the component view in specific scenarios:

• When an @Input() property's reference changes
• When an event is triggered from within the component (like button clicks)
• When you manually trigger change detection

Your HTTP request is asynchronous, so when you update this.pokemons in the subscription callback, Angular doesn't automatically detect the change. Here are two clean ways to fix this:

Option A: Manually Trigger Change Detection

Inject ChangeDetectorRef into your component and call markForCheck() after updating your data:

// Add this import
import { ChangeDetectorRef } from "@angular/core";

@Component({
  // ... your existing component config
})
export class ItemOption implements OnInit,OnDestroy {
  // ... existing variables

  constructor(
    private service_men: Output_restaurants_service,
    page: Page,
    private router: RouterExtensions,
    private cdr: ChangeDetectorRef // Inject ChangeDetectorRef
  ){}

  ngOnInit(){
    this.curChallengeSub = this.service_men.output_included_sides().subscribe(
      (r: Array<{name:string}>)=>{
        // Simplify data mapping with Array.map
        this.pokemons = r.map(item => item.name);
        console.log("Fetched items:", this.pokemons);
        // Tell Angular to check for changes
        this.cdr.markForCheck();
      },
      (error) => {
        // Always handle errors to debug failed requests
        console.error("Failed to fetch data:", error);
      }
    );
  }

  ngOnDestroy(){
    // Clean up the subscription to avoid memory leaks
    if(this.curChallengeSub){
      this.curChallengeSub.unsubscribe();
    }
  }
}

Option B: Use the Async Pipe (Recommended for OnPush)

Instead of storing the array directly, use an Observable and let the async pipe handle change detection automatically. This is more idiomatic for Angular with OnPush:

// Update your component variable
public pokemons$: Observable<Array<string>>;

ngOnInit(){
  // Map the HTTP response directly in the pipe
  this.pokemons$ = this.service_men.output_included_sides().pipe(
    map(r => r.map(item => item.name))
  );
}

Then update your template to use the async pipe:

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

2. Service Improvements #

Add type safety to your HTTP request so you know exactly what data you're working with:

import { Observable } from 'rxjs';

@Injectable({providedIn:'root' })
export class Output_restaurants_service{
  // ... existing code

  output_included_sides(): Observable<Array<{name:string}>> {
    return this.http.get<Array<{name:string}>>(`https://www.pidequehaypos.com/customer_chooses_food_type/output_specific_sides`);
  }
}

3. Other Quick Checks #

• Event Binding Doesn't Affect Display: Your empty onSelectedIndexChanged method or the duplicate selectedIndexChanged method aren't causing the display issue—they just don't do anything when the selection changes.
• Initialization: Make sure pokemons is initialized (you already do this.pokemons = []; in the constructor, which is good).

Why This Works #

• With Option A, markForCheck() tells Angular that the component's state has changed and needs to be checked in the next change detection cycle.
• With Option B, the async pipe automatically subscribes to the Observable, updates the view when data arrives, and cleans up the subscription when the component is destroyed.

内容的提问来源于stack exchange，提问作者Adrian L Perez