Question

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
  heroes: Hero[];
  // heroesCollection: AngularFirestoreCollection<Hero>;

  constructor(private heroService: HeroService, private afs: AngularFirestore) {
    // this.heroesCollection = this.afs.collection('toh');
  }

  ngOnInit() {
    this.getHeroes();

    // this.heroesCollection.valueChanges()
    // .subscribe(heroes => this.heroes = heroes);
  }

  getHeroes(): void {
    this.heroService.getHeroes()
    .subscribe(heroes => this.heroes = heroes);
  }
}

@Injectable({ providedIn: 'root' })
export class HeroService {

  private heroesCollection: AngularFirestoreCollection<Hero>;
  heroes: Observable<Hero[]>;

  constructor(private messageService: MessageService,
              private afs: AngularFirestore) {
    this.heroesCollection = afs.collection('toh');
    this.heroes = this.heroesCollection.valueChanges();
  }

  getHeroes(): Observable<Hero[]> {
    // TODO: send the message _after_ fetching the heroes
    this.messageService.add('HeroService: fetched heroes');
    return this.heroes;
  }

  getHero(id: number): Observable<Hero> {
    // TODO: send the message _after_ fetching the hero
    this.messageService.add(`HeroService: fetched hero id=${id}`);
    // return of(HEROES.find(hero => hero.id === id));
    
    return this.heroesCollection.doc<Hero>(String(id)).valueChanges();
  }
}

我正在使用firestore在Angular.io中研究一个基本示例（英雄之旅）。为了便于阅读和管理，在服务中创建了与Firestore相关的部分，并引用了每个组件。问题是我第一次调用它时，数据加载得很好，但是当我单击另一个位置然后返回时，数据不会出现。我不知道这是否是应有的组件的生命周期或数据引用部分错误。 您可以查看和执行在我上传的link中编写的代码，这表明英雄组件现在正在通过该服务访问Firestore。如果将此部分更改为带注释的部分（直接从组件中调用），则即使单击其他位置然后返回，也可以正常地检索到数据。我认为这是相同的代码，我只想将数据写入服务并对其进行管理，所以我想知道为什么会这样。

Answer 1

我像这样更改了getHeroes（）方法

getHeroes(): Observable<Hero[]> {
  // TODO: send the message _after_ fetching the heroes
  this.messageService.add('HeroService: fetched heroes');
  return this.heroesCollection.valueChanges();
}

在此代码中，我返回集合的当前状态，而不是Observable变量。

Firestore的数据可以通过角度服务进行管理吗？

1 个答案: