时间戳

首页 > 解决方案 > 尝试使用对象属性访问文档信息

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

问题描述

我正在制作一个 CRUD 应用程序，用于将大学橄榄球队添加到数据库并检索数据。我正在使用 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>

团队模型.ts

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

当我运行应用程序并转到显示模板的页面时，除了来自 app.component 的标题外，什么都没有显示。

标签： angulargoogle-cloud-firestoreangular7

解决方案

您需要将获取数据的部分代码放在构造函数中或 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);
}

推荐阅读