IF 和 ELSE 语句中的代码都被执行答案

【问题标题】：Code in IF and ELSE statement get both executedIF 和 ELSE 语句中的代码都被执行
【发布时间】：2020-08-08 10:29:41
【问题描述】：

在我的ngOnInit 挂钩中，我正在从我的数据服务加载学生宿舍列表。如果列表为空（如果之前未在其他组件中加载列表，则会发生这种情况），我必须从后端加载列表。所以我想让我的程序做的是：

从数据服务加载列表 -> if (list.length > 0) -> 使用这个列表。 Else -> 从后端加载列表。

ngOnInit(): void { 
  this._update.currentDorms$
  .subscribe(dorms => {
    if (dorms.length > 0) {
      this.dorms = dorms
      console.log("if statement", dorms)
    } else {
      this._data.getDormLocations().subscribe(dorms => {
        this.dorms = dorms;  
        this._update.changeDorms(dorms);
        console.log("else statement", dorms)})
    }
 })
}

当我打开页面时，console.log() 两个语句都会被执行：

我也尝试使用else if (dorms.length == 0) 而不是只使用else，但结果是一样的。

我检查了，上面的代码确实只出现在ngOnInit 钩子上，所以答案不是我只是错误地复制并粘贴到某个地方，因此它运行了两次......我想也许它必须这样做使用 else 语句中的 Observable，即使不应该运行 else 语句，它是否仍然订阅它？

【问题讨论】：

它们是订阅，可以运行多次。
哦，是的，你是对的，就是这样。代码首先进入 else 语句，从后端加载列表，然后我更新我的数据服务并因此在 currentDorms$ Observable 上触发下一个。然后 dorms.length 变大为 0 并执行 if 语句！
如果你只想要第一次发射然后使用 pipe(take(1)).subscribe

标签： javascript angular observable

【解决方案1】：

Observable 可能会多次发出数据，因此它的回调函数也是如此。如果您只需要获取一次数据，那么我建议使用 Promise over Observable。但是，在您的情况下，您必须取消订阅

ngOnInit(): void { 
  const subscription = this._update.currentDorms$
  .subscribe(dorms => {
    if (dorms.length > 0) {
      this.dorms = dorms
      console.log("if statement", dorms)
    } else {
      this._data.getDormLocations().subscribe(dorms => {
        this.dorms = dorms;  
        this._update.changeDorms(dorms);
        console.log("else statement", dorms)})
    }

    subscription.unsubscribe(); //unsubscribe here
 })
}

【讨论】：

【解决方案2】：

当我不更新 else 部分中的 currentDorms$ Observable 时，只会执行 else 语句。这是因为代码首先进入 else 语句，从后端加载列表，然后我在我的数据服务中更新 currentDorms$ Observable，因此接下来在 currentDorms$ Observable 上触发。这将再次运行订阅中的代码，这次dorms.length 为更大的 0 并执行 if 语句。

奇怪的是，console.log 形式的 if 语句仍然首先打印出来。

【讨论】：