Question

我无法找到最底层/最有效的方法来将组件中的true / false返回到模板，以显示/隐藏Angalar中的按钮。

基本上，我有一个Event对象，用户可以通过“加入”按钮加入该对象。 “加入”按钮应仅在当前用户不是所有者，尚未被请求且未被所有者删除的情况下显示。

当前，我在组件中使用单独的方法来减少模板中的代码。还尝试在可能的情况下使用三元运算符。例子

isOwner(){
   return this.event.ownerId === this.currentFirebaseUser.uid ? true : false
}

isRemoved(){
   return this.event.removedId.includes(this.currentFirebaseUserObj.uid) ? true :  false
}

  isPending() {
    return this.event.pendingId.includes(this.currentFirebaseUserObj.uid) ? true :  false
}

然后显示一个功能为

的按钮

showJoin(){
if (!this.isOWner() && !this.isRemoved() && !this.isPending()) return true
}

问题在于该事件可能没有removeId数组，因此它将返回未定义的状态。我明白了，但是唯一可行的方法就是将它们变成if语句

isRemoved(){
if this.event && this.event.removed{ }
 if (this.event.removedId.includes(this.currentFirebaseuser.uid) return true
}

是否有更快/更容易的方法来执行此操作。我也尝试过将事件对象从模板传回，还使用了安全的导航操作符？在模板中，因为我通过订阅而不是异步获取事件。

Answer 1

您可以这样做：

isRemoved() {
    return this.event != null && this.event.removedId != null && this.event.removedId.includes(this.currentFirebaseuser.uid)
}

请注意，我使用的是!= null，而不是!== null。通过使用!=，它将同时匹配null和undefined

角度：根据组件中的多个条件返回

1 个答案: