角度可观察数组对象转换 [英] Angular Observable Array Object Conversion

问题描述

因此，我已经阅读了许多有关Java/Angular中项目转换的问题，但找不到任何解决我问题的方法.我正在从Firestore中拉出一个可以复制的对象.然后，我需要使用1到多次转换来转换对象.来自Firestore的对象是"MultipleCard".该"MultipleCard"具有一个名为"copies"的属性，该属性用于表示应创建多少张"Cards".

So I've read numerous questions on SO about item conversions in Javascript/Angular but am not finding anything that addresses my issues. I'm pulling from Firestore as an object that can have copies. I then need to convert the object using a 1 to many conversion. The object coming from Firestore is a 'MultipleCard'. This 'MultipleCard' has a property called 'copies' which will be used to signify how many 'Cards' should get created.

  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 []?例如，我可能有一个带有以下"MultipleCard"的数组

How do I convert Observable into Observable or Card[]? For example I may have an array with the following 'MultipleCard's

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

应将其转换为4个卡片"对象的数组:

That should beconverted into an array of 4 'Card' Objects:

[{ 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错误TypeError:无法读取未定义的属性"push"在评估时(deck-list.component.ts:40)

core.js:1350 ERROR TypeError: Cannot read property 'push' of undefined at 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);
    });
  });
});

推荐答案

您可以在集合上使用 valueChanges()或 snapshotChanges()从您的收藏夹中返回Observable要求.

You can use valueChanges() or snapshotChanges() on the collection to return the Observable from your request.

以下是 valueChanges()的示例:

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

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

so this line returns an Observable<MultipleCard[]> which you can then subscribe to and receive the MultipeCard[] array, like so:

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

您不需要在组件中手动预订，因为这就是ASYNC管道在标记中为您所做的.您可以像这样在标记中设置forLoop，这样 * ngFor =让(posts | async)的帖子" ，这也将开始对Observable数据的订阅，并且在此组件处于关闭状态时也将关闭订阅毁了.希望对您有所帮助！

You do not need to manually subscribe to this in your component as thats what the ASYNC pipe does for you in the markup. You can set your forLoop in your markup like so *ngFor="let post of (posts | async)" and that will also begin the subscription to your Observable data and also close the subscription when this component is destroyed. I hope this can be of help!

您应该对Observable数据和rxjs库进行更多研究，因为它将使您对从Firebase(特别是firestore)处理的数据有更多了解.

You should do some more research on Observable data and the rxjs library that this is utilizing as it will give you more insight on the data you are handling from firebase (specifically firestore).

这篇关于角度可观察数组对象转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！