Angular 2 firestore显示数据集合 - >文档 - >集合--->文档 - >值

时间:2017-12-19 16:56:25

标签: angular angularfire2 google-cloud-firestore

我在firestore中有这个:

user1:
     task1:
          client:
          Project:
          Date:
    task2:....
user2:.
      .
      .
      .

所以我想显示如下数据:

@Injectable()
export class ItemService {
  itemsCollection: AngularFirestoreCollection<Item>;
  tasksCollection: AngularFirestoreCollection<Task>;
  items: Observable<Item[]>;
  tasks: Observable<Task[]>;
  constructor(public afs: AngularFirestore) {
    this.itemsCollection = this.afs.collection<Item>('users');
    this.items = this.itemsCollection.snapshotChanges().map(actions => {
      return actions.map(a => {
        const data = a.payload.doc.data() as Item;
        data.id = a.payload.doc.id;
        console.log(data);
        return data;  
      });   
    });
  }
   getItems(){
     return this.items;
   }
   gettasks(){
   //this works when i use a key of a user but i want to use a variable like data.id 
    this.tasksCollection = this.afs.collection('users').doc("S1fAjCs5udebjeFnHyEJpyAV4Ls1").collection("tasks");
    this.tasks = this.tasksCollection.snapshotChanges().map(actions => {
      return actions.map(a => {
        const data = a.payload.doc.data() as Task;
        data.idt = a.payload.doc.id;
        console.log(data.idt);
        return data; 
      });
    });
    return this.tasks;
  
   }
}

使用我的代码,我可以显示所有用户,但我不知道如何让用户和他们的任务。 PS:电子邮件和uid是用户密钥之后的值。如果你看到方法gettasks,我可以显示一个用户的任务我想要更改doc()中的静态键与所有键的值 谢谢你,对不起我的英语。 服务。

&#13;
&#13;
<div class="container">  

  <div *ngIf="items?.length > 0; else noItems">
    <ul *ngFor="let item of items" class="collection">
      <li class="collection-item"><strong>{{item.email}}:</strong> {{item.uid}} {{item.id}} </li>
      <div class="container">  

          <div *ngIf="tasks?.length > 0; else noTasks">
            <ul *ngFor="let task of tasks" class="collection">
              <li class="collection-task"><strong>{{task.Client}}:</strong>{{task.Project}} {{task.Date}} {{task.idt}}</li>
            </ul>
        </div>
        
        <ng-template #noTasks>
        <hr>
        <h5> there are no tasks</h5>
        
        </ng-template>
        </div>
    </ul>
</div>

<ng-template #noItems>
<hr>
<h5> there are no items to list</h5>

</ng-template>
</div>
&#13;
{{1}}
&#13;
&#13;
&#13;

0 个答案:

没有答案