在 Angular 4 组件中初始化变量的位置 - ExpressionChangedAfterItHasBeenCheckedError答案

【问题标题】：Where to initialize variables in an Angular 4 component - ExpressionChangedAfterItHasBeenCheckedError在 Angular 4 组件中初始化变量的位置 - ExpressionChangedAfterItHasBeenCheckedError
【发布时间】：2018-04-01 19:19:12
【问题描述】：

我有一个带有布尔变量的 Angular 4 组件。初始值取决于输入流。

TypeScript 要求我像下面的示例一样声明变量。没有它 this.isLoading 会触发错误。

此时我还不知道它的值，所以我只声明它而不分配变量。

export class SomeComponent implements OnInit {
  @Input() someStream$;
  isLoading: boolean;

  ngOnInit() {
    someStream.subscribe((someData) => {
      // Code to determine the value for isLoading
      this.isLoading = true; 
    });
  }
}

稍后当我知道该值时，我会将其设置为 true 或 false。但随后会出现“ExpressionChangedAfterItHasBeenCheckedError”。

设置这些“默认”值的“正确方法”是什么。

【问题讨论】：

尝试 ngOnChages() 生命周期而不是 ngOnInit()，它可能会解决您的问题。
接下来在 someStream 上何时何地调用？
@MohamedGara 在同一个 onInit 块中是一些检查 URL 参数的逻辑。如果所有必需的参数都在那里，它会启动一个 http 调用并设置 isLoading。

标签： angular typescript rxjs

【解决方案1】：

我假设 isLoading 是您知道请求是否完成的标志。我在这种情况下所做的是将加载初始化为 false：

export class SomeComponent implements OnInit {
  @Input() someStream$;
  // Initialized as false.
  isLoading: boolean = false;

  ...
}

如果 isLoading 标志有更多逻辑，我会改变你与组件交互的方式，将 @Input() 直接更改为 someData，并在其父级中处理异步逻辑。

希望对你有帮助。

【讨论】：

我已经尝试过了，当 isLoading 在 ngOnInit 的“相同刻度”内评估为 true 时它不起作用我收到 ExpressionChangedAfterItHasBeenCheckedError。恐怕将变量向上移动到父级只会将问题移动到另一个组件。
有点奇怪，因为我的代码与您的代码完全相同，并且没有抛出任何错误。可以肯定的是，您的订阅是否只被触发一次？也许 observable 在同一周期内发送新值。