Angular 5中http.get初始化数组为空但DataService内数组正常问题求助

Hey there! Let's break down why you're seeing an empty array when using this.http.get("item.json") even though your DataService has the full data later. This is a super common gotcha with asynchronous operations in Angular—let's fix it step by step.

为什么会出现这个问题？ #

Angular's HttpClient.get() is an asynchronous operation. That means when you try to access your array right after calling the request, the request hasn't finished fetching the data from item.json yet. Your code runs synchronously, so it grabs the empty initial array before the HTTP response comes back.

For example, if your service looks like this (the problematic version):

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable()
export class DataService {
  items: any[] = [];

  constructor(private http: HttpClient) {
    // 这个请求是异步的，不会立刻填充items数组
    this.http.get('item.json').subscribe(data => {
      this.items = data;
    });
  }

  getItems() {
    return this.items; // 请求完成前就返回了空数组！
  }
}

And your component calls getItems() right away:

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-root',
  template: `<div>{{ items.length }}</div>`
})
export class AppComponent {
  items: any[];

  constructor(private dataService: DataService) {
    this.items = this.dataService.getItems(); // 这里拿到的是空数组
  }
}

You'll see 0 rendered, even though the service eventually gets the full data.

正确的解决方案 #

方案1：让服务返回Observable，组件订阅获取数据 #

Instead of returning the raw array, have your service return an Observable of the data. Then your component can subscribe to it, ensuring you only get the data once the HTTP request completes.

改进后的DataService：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { shareReplay } from 'rxjs/operators';

@Injectable()
export class DataService {
  // 用Observable缓存请求结果，避免重复调用HTTP请求
  private items$: Observable<any[]>;

  constructor(private http: HttpClient) {
    this.items$ = this.http.get<any[]>('item.json').pipe(
      shareReplay(1) // 缓存结果，后续订阅直接用缓存的数据
    );
  }

  getItems(): Observable<any[]> {
    return this.items$;
  }
}

组件中订阅获取数据：

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-root',
  template: `<div>{{ items.length }}</div>`
})
export class AppComponent implements OnInit {
  items: any[] = [];

  constructor(private dataService: DataService) {}

  ngOnInit() {
    // 在ngOnInit里订阅，确保组件初始化后处理数据
    this.dataService.getItems().subscribe(items => {
      this.items = items; // 请求完成后才赋值，拿到完整数据
    });
  }
}

方案2：使用Angular的Async管道（更简洁） #

If you want to avoid manual subscriptions, use Angular's async pipe in your template. It handles subscribing and unsubscribing automatically, which is great for avoiding memory leaks.

组件代码：

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-root',
  template: `
    <div *ngFor="let item of items$ | async">
      {{ item.name }}
    </div>
  `
})
export class AppComponent implements OnInit {
  items$: Observable<any[]>;

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.items$ = this.dataService.getItems();
  }
}

额外检查点 #

• Verify your item.json path: Make sure the file is in your assets folder (Angular's default static asset directory). If it's there, your request URL should be assets/item.json instead of just item.json. Check your browser's Network tab to see if the request returns a 200 status code—if it's 404, the path is wrong.
• Check for errors in the request: Add an error handler to your subscription to catch any issues:

  this.dataService.getItems().subscribe(
    items => this.items = items,
    error => console.error('Error fetching items:', error)
  );
  

内容的提问来源于stack exchange，提问作者Александр Серобабов