Question

所以我在Javascript / Angular上阅读了很多关于项目转换的问题，但是没有找到解决我问题的任何内容。我从Firestore中撤出作为可以拥有副本的对象。然后我需要使用1到多次转换来转换对象。来自Firestore的对象是一个“MultipleCard”＆＃39;。这个＆＃39; MultipleCard＆＃39;有一个叫做“复制”的财产。这将用于表示有多少卡＆＃39;应该被创造出来。

  postsCol: AngularFirestoreCollection<MultipleCard>;
  posts: Observable<MultipleCard[]>;

  cardsListObservable: Observable<Card[]>; //Not sure which to use
  cardsList: Card[]; //Not sure which to use

  constructor(private messageService: MessageService,
              private db: AngularFirestore) {
    this.messageService.add('Fetching cards');

    this.postsCol = this.db.collection('cards');
    this.posts = this.postsCol.valueChanges();

 //?? Nothing I do here seems to work correctly. Most operations act on the array itself or do a 1 to 1 conversion
}

组件

<mat-list *ngFor="let card of cardsList | async"> //Or cardsListObservable
  <mat-list-item>{{card.name}}</mat-list-item> 
 </mat-list>

如何将Observable转换为Observable或Card []？例如，我可能有一个包含以下＆＃39; MultipleCard＆＃39;

的数组

 [{ id: 1,
     copies: 3},
    {id: 2, copies:1}]

应该转换成4＆＃39; Card＆＃39;对象：

[{ id: 1, copyVersion:1},
    { id: 1, copyVersion:2}.
    { id: 1, copyVersion:3},
     { id: 2, copyVersion:1}]

我很感激任何见解！

编辑1

尝试以下方法：

this.posts.subscribe((posts) => {
  posts.forEach( post => {
    console.log(post);
    this.cardsList.push(post);
  });
});

但是得到：

core.js：1350 ERROR TypeError：无法读取属性＆＃39; push＆＃39;未定义的在eval（deck-list.component.ts：40）

最终更新代码：

  static fromMultiple(multipleCard: MultipleCard): Card[] {
    const data: Card[] = [];
    for (let i = 0; i < multipleCard.copies; i++) {
      data.push(new Card(multipleCard));
    }
  return data;

}

this.postsCol = this.db.collection('cards');
this.posts = this.postsCol.valueChanges();

this.posts.subscribe((posts) => {
  posts.forEach( post => {
    const temp = Card.fromMultiple(post);
    temp.forEach(tempCard => {
      this.cardsList.push(tempCard);
    });
  });
});

Answer 1

您可以在集合上使用valueChanges()或snapshotChanges()从您的请求中返回Observable。

以下是valueChanges()的示例：

this.posts = this.db.collection<MultipleCard[]>('posts').valueChanges();

所以这一行返回一个Observable<MultipleCard[]>然后您可以订阅并接收MultipeCard []数组，如下所示：

this.posts.subscribe((posts) => {
   console.log(posts); //This is the array of posts, not an observable
 });

您不需要在组件中手动订阅这个，因为ASYNC管道在标记中为您做了什么。您可以在标记中设置forLoop，如*ngFor="let post of (posts | async)"，这也将开始订阅您的Observable数据，并在销毁此组件时关闭订阅。我希望这可以有所帮助！

你应该对Observable数据和它正在使用的rxjs库做更多的研究，因为它可以让你更深入地了解你从firebase（特别是firestore）处理的数据。

Answer 2

你要么订阅你的可观察流，要么宣传它，看看你得到了什么。假设一个函数getData（）返回一个observable，你可以做

getData().subscribe((card: any) => * do something *)

或

getData().toPromise().then((card: any) => * do something*)

我建议这样做并登录响应（卡在这里）。这样你就可以知道发生了什么。

角度可观察数组对象转换

2 个答案: