Question

我正在开发我的第一个angular / firestore应用程序，现在我可以显示单个集合中的文档数据，而没有子集合。我正在尝试对此进行扩展并显示子集合中的数据。我的Firestore数据库如下所示。

用户->用户ID->打架-> fightId

我现在试图在页面上显示战斗，因此我试图查询“战斗”的子集合并将其编码到我的组件中。

我的TS：

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

    
    userId: any;
    fights$: Observable<any>;
    users$: Observable<any>;
    user: any;
    private readonly subscription: Subscription;
    fightCollection: AngularFirestoreCollection<any>;

   

    
     constructor(private afs: AngularFirestore, private firestoreData: FirestoreDataService, public auth: 
    AuthService, private fightTest: FightService) {
    this.subscription = auth.user$.subscribe(user => {
    this.userId = user.uid
    this.fightCollection = this.afs.collection<any>(`users/${this.userId}/Fights`);
    this.fights$ = this.fightCollection.valueChanges();
    
  
       });
      }

      ngOnInit() {
   
       }

      ngOnDestroy() {
       this.subscription.unsubscribe();
  
    
     }

    }

用户ID是从我创建的注入的身份验证服务中提取的。我将userID放入变量中只是为了测试是否可以正确提取uid。然后，我尝试将userId值编码到正确的Firestore路径中，以拉动用户Fights集合并将其分配给可观察对象。

我的HTML：

      <ul *ngFor="let fight of fights | async">
     <li>
      fight.blueFighter;
     </li>
    </ul>

为简单起见，我现在暂时仅尝试将字段拉到蓝色。

我没有收到任何错误，但也没有显示任何内容。我无法判断我是否正在正确阅读该集合，或者只是无法正确地以HTML调用它。

Answer 1

尝试更改构建可观测物的方式。不要在订阅中定义它们。改用更高的可观察性。

    ...
    this.fights$ = auth.user$.pipe(
        tap(user => console.log('is user emitting?: ', user)),
        take(1),
        mergeMap(user => {
            this.userId = user.uid
            this.fightCollection = this.afs.collection<any>(`users/${this.userId}/Fights`);
            return this.fightCollection.valueChanges();
        }),
        tap(fights => console.log('fights value: ', fights))
    );
    ...

添加tap运算符可以帮助您了解您的可观察对象是否确实在发射某些东西。

此外，我认为您的html中有一个错字，应该是Fights $：

<ul *ngFor="let fight of fights$ | async">
 <li>
  {{fight.blueFighter}}
 </li>
</ul>

如何使用Angular查询和显示子集合？

1 个答案: