从 Angular 11 observables 获取简单的字符串数组

Question

我正在尝试从 Angular 中的 GET 调用中获取简单的字符串数组。我需要这个数组来匹配代码中的目的。我不需要通过 *ngFor 将它暴露给 DOM。

目前我得到了

[]
0: (4) ["a", "b", "c", "d"]
length: 1
__proto__: Array(0)

使用此代码：

projects: string[] = [];

this.http.get(`${this.baseUrl}`)
      .pipe(
        map((data: any) => data.response.body
          .map(item => {
              return item.shortName;
            }
          )
        )
      ).subscribe((project: any) => {

      this.projects.push(project);
    });

问题是获取列表的第一个元素：

this.projects[0] = 未定义

字符串数组的手动推送

const proje = ['a', 'b', 'c', 'd']; 由

this.projects.push(proje);

返回：

[Array(4)]
0: (4) ["a", "b", "c", "d"]
length: 1
__proto__: Array(0)

那绝对没问题 this.projects[0] = ['a', 'b', 'c', 'd']。

任何想法将不胜感激。谢谢

Answer 1

这是一个异步调用。 JavaScript 不会等待它完成并继续执行下一行代码。如果您在此调用之后直接console.log()，您将始终看到一个未定义的数组，因为它会在很久以后才被填充。

this.http.get(`${this.baseUrl}`)
  .pipe(
    map((data: any) => data.response.body
      .map(item => {
          return item.shortName;
        }
      )
    )
  ).subscribe((project: any) => {

  this.projects.push(project);

  // have a look here
  console.log(this.projects);
});