Angular2新手从API获取数据并遍历遇问题，求解决方案

Hey there! I see you're new to Angular 2 and stuck on fetching and displaying data from an API—let's get this sorted out for you.

The core problem in your code is that API calls in Angular are asynchronous, and you're treating the result of this.api.get() like a synchronous value. That method almost certainly returns an Observable (Angular's way of handling async operations), not the actual product data directly.

Here's how to fix your component code:

import { Component, OnInit } from '@angular/core';
import { ApiService } from './api.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  // Initialize with an empty array to avoid undefined errors in the template
  products: any[] = [];

  constructor(private api: ApiService) {}

  ngOnInit() {
    this.getProducts();
  }

  getProducts() {
    // Subscribe to the Observable to get the actual data
    this.api.get('http://api/products...') // Note: fixed the URL typo (missing slash)
      .subscribe({
        next: (data) => {
          // Assign the fetched data to your products property
          this.products = data;
        },
        error: (err) => {
          // Handle any errors (optional but recommended)
          console.error('Failed to fetch products:', err);
        }
      });
  }
}

Key Changes Explained: #

• Initialized products as an empty array: Prevents template errors if the API call takes time to complete.
• Subscribed to the Observable: The subscribe() method lets you access the data once the API call finishes. The next callback runs when the data is successfully retrieved, and error handles any network issues.
• Fixed the URL typo: Your original URL had http:/ instead of http://—that would cause a failed request right away!

Alternative: Using the Async Pipe (Even Better!) #

If you want to avoid manual subscription management (which helps prevent memory leaks), you can use Angular's async pipe in your template. Here's how to adjust your component:

// In your component
products$: Observable<any[]>;

ngOnInit() {
  this.products$ = this.api.get('http://api/products...');
}

Then in your template (app.component.html):

<ul>
  <li *ngFor="let product of products$ | async">
    {{ product.name }} <!-- Replace with your product properties -->
  </li>
</ul>

The async pipe automatically subscribes and unsubscribes from the Observable, making your code cleaner.

Make sure your ApiService's get method is properly set up to return an Observable (using Angular's HttpClient under the hood, which is standard for Angular 2+).

内容的提问来源于stack exchange，提问作者Ali Rasheed