Question

这是我的代码。

todo.service.ts

    import { Injectable } from '@angular/core';
    import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from 'angularfire2/firestore';
    import { User } from '../models/user.model';
    import { Observable } from 'rxjs';
    import { map } from 'rxjs/operators';
    import * as firebase from "firebase";

    @Injectable({
      providedIn: 'root'
    })
    export class TodoService {

      private userCol: AngularFirestoreCollection<User>;
      private users: Observable<User[]>;
      private doc_id: string;

      constructor(private afs: AngularFirestore) { }

我想加载具有特定ID的用户数据并获取相同集合的doc_id

      loadUserTodoList(userId) {
        this.userCol = this.afs.collection('users', ref => ref.where('id', '==', userId));
        this.users = this.userCol.snapshotChanges().pipe(
          map(docArray => {
            return docArray.map(doc => {
              const data = doc.payload.doc.data() as User;
              const id = doc.payload.doc.id;
              return { id, ...data };
            })
          }));
          console.log(this.users);
        return this.users;
      }


      addtodoItem(todoitem: string) {
        //working code with static doc_id        
      }

    }

dashboard.component.ts

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../../services/auth.service';
import { TodoService } from '../../services/todo.service';
import { Observable } from 'rxjs';
import { User } from '../../models/user.model';
import { ProfileService } from '../../services/profile.service';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {

  private userData: Observable<User[]>
  constructor(private authservice: AuthService, private todo: TodoService,) { }

  todoItem:string;
  currentUserId:string;


  ngOnInit() {
    this.currentUserId=this.authservice.getUserId();
    this.userData = this.todo.loadUserTodoList(this.currentUserId);
  }

  addTodo() {
    console.log("add todo method called");    
    this.todo.addtodoItem(this.todoItem);
    this.todoItem='';
  }

  // deleteTodo(todoItem){
  //   this.todo.deleteTodoItem(todoItem);
  // }

  // deleteAll(){
  //   this.todo.deleteAll();
  // }
}

Dashboard.html

<ul *ngFor="let user of users | async">
  <li>{{ user.name }}
    <br/>{{ user.displayName }}
    <br/>
    <p *ngFor="let todo of user.todoList">
      {{ todo }}<button (click)="deleteTodo(todo)">Delete</button>
    </p>
  </li>
</ul>

此用户记录的输出

Observable {_isScalar: false, source: Observable, operator: MapOperator}
operator
:
MapOperator
project
:
ƒ (docArray)
arguments
:
[Exception: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them at Function.remoteFunction (<anonymous>:2:14)]
caller
:
[Exception: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them at Function.remoteFunction (<anonymous>:2:14)]
length
:
1
name
:
""
prototype
:
{constructor: ƒ}
__proto__
:
ƒ ()
[[FunctionLocation]]
:
todo.service.ts:22
[[Scopes]]
:
Scopes[3]
0
:
Closure (push../src/app/services/todo.service.ts.TodoService.loadUserTodoList) {type: "closure", name: "push../src/app/services/todo.service.ts.TodoService.loadUserTodoList", object: {…}}
1
:
Closure (./src/app/services/todo.service.ts)
TodoService
:
ƒ TodoService(afs)
angularfire2_firestore__WEBPACK_IMPORTED_MODULE_1__
:
{…}
firebase__WEBPACK_IMPORTED_MODULE_3__
:
{__esModule: true, initializeApp: ƒ, app: ƒ, Promise: ƒ, …}
rxjs_operators__WEBPACK_IMPORTED_MODULE_2__
:
{…}
__assign
:
ƒ assign()
__decorate
:
ƒ (decorators, target, key, desc)
__metadata
:
ƒ (k, v)
arguments
:
[Exception: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them at Function.remoteFunction (<anonymous>:2:14)]
caller
:
(...)
length
:
2
name
:
""
prototype
:
{constructor: ƒ}
__proto__
:
ƒ ()
[[FunctionLocation]]
:
profile.service.ts:10
[[Scopes]]
:
Scopes[2]
_angular_core__WEBPACK_IMPORTED_MODULE_0__
:
{…}
2
:
Global {type: "global", name: "", object: Window}
thisArg
:
undefined
__proto__
:
call
:
ƒ (subscriber, source)
arguments
:
[Exception: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them at Function.remoteFunction (<anonymous>:2:14)]
caller
:
(...)
length
:
2
name
:
""
prototype
:
{constructor: ƒ}
__proto__
:
ƒ ()
[[FunctionLocation]]
:
map.js:17
[[Scopes]]
:
Scopes[2]
constructor
:
ƒ MapOperator(project, thisArg)
__proto__
:
Object
source
:
Observable
_isScalar
:
false
_subscribe
:
ƒ (subscriber)
__proto__
:
Object
_isScalar
:
false
__proto__
:
Object

Answer 1

尝试一下

this.users = this.userCol.snapshotChanges().pipe(
  map(actions => actions.map(a => {    // THIS LINE IS SLIGHTLY DIFFERENT
    const data = a.payload.doc.data();
    const id = a.payload.doc.id;
    return { id, ...data };
  }))
);

角消防商店this.userCol.snapshotChanges（）不起作用

1 个答案: