Question

长时间潜伏，第一次闯入。

我正在尝试学习7号角，并且正在开发一个用于将大学橄榄球队添加到数据库并检索数据的应用程序。我正在使用Google Firestore作为数据库。

我能够检索团队的ID并将其存储在变量中，但是我遇到了一些问题，使用ID来检索文档，然后使用对象属性来获取信息。任何帮助都非常感谢。

firebase.service.ts

import { Injectable } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from '@angular/fire/firestore';
import { Observable } from 'rxjs';   
import { Team } from '../team.model';

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

  constructor(public db: AngularFirestore) {
  }

  getTeam(id:string) {
    return this.db.doc('teams/' + id);
  }
}

team-home.component.ts

import { Component, OnInit } from '@angular/core';
import { FirebaseService } from '../../shared/firebase.service';
import { ActivatedRoute, Router } from "@angular/router";
import { Team } from '../team.model';

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

  constructor(
   private router: Router,
    private firebaseService: FirebaseService,
    private actRoute: ActivatedRoute
  ) { }

  id = this.actRoute.snapshot.paramMap.get('id');
  team = this.firebaseService.getTeam(this.id);

  ngOnInit() {

  }

}

team-home.component.html

<p>
  {{team.schoolName}}
</p>
<router-outlet></router-outlet>

team.model.ts

export class Team {
    id: string;
    schoolName: string;
    teamName: string;
    location: string;
    conference: string;
}

当我运行应用程序并转到显示模板的页面时，除了app.component的标题外，什么都没有显示。再次感谢您的帮助。

Answer 1

您需要将获取数据的部分代码放在构造函数中或ngOnInit（）m上，否则代码将永远不会执行

constructor(
    private router: Router,
    private firebaseService: FirebaseService,
    private actRoute: ActivatedRoute
  ) { 
  id = this.actRoute.snapshot.paramMap.get('id');
  team = this.firebaseService.getTeam(this.id);
}

尝试使用对象属性访问文档信息

1 个答案: