Typescript数组随机变为不确定

时间:2019-05-03 08:05:00

标签: typescript

我一直在尝试将Web服务中的数据获取到我的自定义类型的数组中(两个模型都匹配,我已经检查过了)

对象本身people被定义并初始化为类型为Person的黑色数组。

但是,在进行订阅调用时,数组现在未定义。

这是可行的,我实际上不确定为什么它停止了

声明

  people: Person[] = [];

订阅

getPeople() {
    this.isLoading$.next(true);
    this.PeopleService.GetAll().subscribe(
      o => {
        if (o) {
          this.people = o;
        }
        else {
          this.people = [];
        }
      },
      error => {
        console.log(error);
      },
      () => {
        this.isLoading$.next(false);
      }
    );
  }

在该方法之前,this.people被定义为Array[0]

getPeople方法中,this.people未定义。 o已定义并具有数据。

  

UPDATE 1 2019/05/03 10:41

调试时我注意到了以下内容

Console

这可能是原因,如果是为什么?我一直在写所有这样的方法,但是没有一个给我这个问题

2 个答案:

答案 0 :(得分:1)

我的猜测是您正在使用IDE中的调试器/断点检查该值。我还猜您正在将打字稿编译为es5。另一个猜测是,源映射未在调试器环境中加载。

所有这些结合在一起会给您带来不协调的混乱。

使用箭头功能符号() => {}在引擎盖下执行的操作是在箭头前面设置_this = this,然后将功能更改为function() {},它将有一个新的{{ 1}}上下文。当您编译到不支持箭头符号的版本时,就会发生这种情况。

如果您实际执行this而不是设置断点,它将输出正确/期望的值。这被编译为外部作用域的console.log(this.people)console.log(_this.people)。这有道理吗?

无论如何,您应该找到一种方法来让您的IDE加载源地图,或使用chrome调试器来加载正确的源地图,并为您的代码提供更简洁的图片

答案 1 :(得分:0)

我注意到这部分

        o => {
        if (o) {
          this.people = o;
        }
        else {
          this.people = [];
        } 

将其更改为SafeSubscriber类型,而不是实际的Component。 因此,根据所有权利,this.people在该范围内未定义。

更改为

  o => (this.people = o)

按预期工作

我不完全确定为什么以及是否有人可以找出答案,我很乐意将其标记为可接受的答案。