Question

我正在学习Angular，但似乎找不到解决此问题的方法。我正在订阅HTTP服务。但是，订阅后，之后的所有脚本都不会激活。即使是简单的console.log数据日志也不会激活。

如果我这样做，它将起作用：

    this._colorsService.returnColorsHttp()
      .subscribe(
        (data: any) => {
          this.colors = data;
          this.totalColors = data.length;
          this.colorRows = Array.from(Array(Math.ceil(this.totalColors / this.colorItemsPerRow)).keys())
          console.log(this.totalColors);
          console.log(this.colorRows);
        }
      );
  }

但是，如果执行此操作，它将失败：

    this._colorsService.returnColorsHttp()
      .subscribe(
        (data: any) => {
          this.colors = data;
          this.totalColors = data.length;
        }
      );
    this.colorRows = Array.from(Array(Math.ceil(this.totalColors / this.colorItemsPerRow)).keys())
    console.log(this.totalColors);
    console.log(this.colorRows);
  }

提前谢谢！

Answer 1

成功接收到服务的响应后，将调用订阅中的代码，直到此为止，它不会被阻止，并继续进行订阅下面的代码。收到响应后，此后才执行订阅块中的代码。

这就是异步任务的工作方式。

Answer 2

以下内容应放在您的订阅中：

this.colorRows = Array.from(Array(Math.ceil(this.totalColors / 
this.colorItemsPerRow)).keys())
console.log(this.totalColors);
console.log(this.colorRows);

赞：

this._colorsService.returnColorsHttp()
  .subscribe((data: any) => {
      this.colors = data;
      this.totalColors = data.length;

      this.colorRows = Array.from(Array(Math.ceil(this.totalColors / 
      this.colorItemsPerRow)).keys())
      console.log(this.totalColors);
      console.log(this.colorRows);
    }
  );

}

HTTP订阅后ngOnInit中的脚本无法激活

2 个答案: