我使用firebase以角度创建应用程序，如何让每个用户拥有自己的任务表[关闭]答案

【问题标题】：I created application in angular using firebase, how to make possible for each user to have their own table with tasks [closed]我使用firebase以角度创建应用程序，如何让每个用户拥有自己的任务表[关闭]
【发布时间】：2021-02-02 00:00:39
【问题描述】：

我需要改进什么，以及我需要在我的代码中添加什么，以便每个登录用户都有自己的任务表，并且可以更新和删除自己的任务。我的第二个问题是如何隐藏菜单项 tasks、add-tasks、如果用户未登录，则注销，如果用户已登录，如何显示它们。这是我在 GitHub https://github.com/AleksandarRadinkovic/angular-app 上的应用程序。如果您想查看任务表，并添加删除或更新任务，您需要先注册然后登录。

【问题讨论】：

标签： javascript angular typescript firebase ecmascript-6

【解决方案1】：

为每个用户创建单独的任务表，您可以创建一个集合结构添加一个具有登录用户名或其键的节点，并在每个节点内添加任务集合。

例如：

{
  "User1" : {
      tasks : [
            {
          taskName : "demotask"    
                },
        {
          taskName : "demotask"    
                }    
        ]
  },

  "User2" : {
      tasks : [
            {
          taskName : "demotask"    
                },
        {
          taskName : "demotask"    
                }    
        ]
  }
}

Firebase 将登录用户详细信息存储在浏览器存储中，因此您需要检查用户是否登录。使用*ngIf 可以显示隐藏菜单项。

例如：

//create common helper Service
checkLoginUser() {
        let user = null;

        // Code to check if the user logged in or not.
        // If there is a user in local storage save in the "user" variable.

    return user? true : false;        
}

// Inject service inside component and store user status in component variable
isUserLoggedIn = this.checkLoginUser();

// Handle Show hide using *ngIf inside template
<ul>
    <li *ngIf="isUserLoggedIn">Tasks</li>
    <li *ngIf="isUserLoggedIn">Add Task</li>
    <li *ngIf="isUserLoggedIn">Logout</li>
</ul>

【讨论】：

【解决方案2】：

要为每个用户创建一个表（集合），您需要为他们创建一个子集合。以下是一些基础知识：https://firebase.google.com/docs/firestore/data-model#subcollections

要检查用户是否已登录，请检查以下问题：How do I detect if a user is already logged in Firebase?。使用*ngIf 或类似的东西根据状态更改HTML。

【讨论】：