Question

我有这项服务，可以从服务器检索数据

export class SiteService {

  API_URL = '/sites';

  constructor(
    private http: HttpClient
  ) { }

  getSites(): Observable<Site[]> {
    return this.http.get<Site[]>(this.API_URL).pipe(
      map((site: Site) => {
        console.log('---site', site);
        return new Site().deserialize(site);
      })
    );
  }
}

我的数据当前来自于通过testBed和HttpTestingCotroller的flush进行的模拟测试。这是我通过的

const dummySites = [
        {
          path: 'https://example.com/img1.img',
          siteLink: 'http://example1.com',
          features: [
            'feature 1',
            'feature 2',
            'feature 3'
          ]
        },
        {
          path: 'https://example.com/img2.img',
          siteLink: 'http://example2.com',
          features: [
            'feature 1',
            'feature 2',
            'feature 3'
          ]
        }
      ];

但是最后，当我尝试映射此数据数组时，却得到了map的奇怪行为。在代码中，有一个console.log来检查函数中包含什么以及它是什么由于某种原因，它不传递数组的元素，而是传递整个数组，这使我在接下来的步骤中无法理解整个逻辑。

Answer 1

Observable旨在发出值流。像http之类的东西只会发出一个值，而有些会发出多个值

rxjs map运算符旨在转换Observable发出的每个值。您的Observable源自HTTP请求，因此它只会发出一个值，在这种情况下，它将是一个数组。这意味着传递到map的值是数组，而不是数组中的每个值。

如果您还想变换数组中的每个项目，则也可以使用属于数组的map函数

  getSites(): Observable<Site[]> {
    return this.http.get<Site[]>(this.API_URL).pipe(
      map((site: Site[]) => {
        console.log('---site', site);
        return site.map((s) => new Site().deserialize(s));
      })
    );
  }

RxJs映射传递一个数组而不是数组的一个元素

1 个答案: