简化另一个内部的if / else

Question

我有一段代码，我需要在if里面放一个if / else来改变我视图的DOM：

else {
      this.selectedUser = this.user.find(b => b._id === userId)
      this.onSelect.emit(this.selectedUser)
      if (this.selectedUser.isConnected) {
        (<HTMLImageElement>document.getElementById('user-state')).src = 'assets/imgs/userConnected.png'
      } else {
        (<HTMLImageElement>document.getElementById('user-state')).src
          = 'assets/imgs/userDiscoonnected.png'
      }
    }

有没有一种方法可以简化？还是让它更干净？

Answer 1

else {
  this.selectedUser = this.user.find(b => b._id === userId)
  this.onSelect.emit(this.selectedUser)

  var imgPath = this.selectedUser.isConnected ? 'assets/imgs/userConnected.png' : 'assets/imgs/userDiscoonnected.png';

  (<HTMLImageElement>document.getElementById('user-state')).src = imgPath;
}

三元运算符看起来不错。

Answer 2

我能想到的唯一可读的方法是

 else {
          this.selectedUser = this.user.find(b => b._id === userId)
          this.onSelect.emit(this.selectedUser)
          (<HTMLImageElement>document.getElementById('user-state')).src =
          this.selectedUser.isConnected 
          ? 'assets/imgs/userConnected.png' 
          : 'assets/imgs/userDiscoonnected.png';
        }

Answer 3

与? :进行比较时，可以使用bool来简化if语句。

?左侧的语句是要满足的条件。如果条件为真，则在:的左侧放置变量的值。在:的右侧，放置条件为假时的值。

var src = this.selectedUser.isConnected ? 'assets/imgs/userConnected.png' : 'assets/imgs/userDiscoonnected.png';
<HTMLImageElement>document.getElementById('user-state')).src = src;