如何使用 AngularFire2 显示嵌套的列表列表

Question

我正在尝试显示“站”列表，并在返回的每个“站”中显示当前位于该“站”的“项目”列表。使用 angularfire2 snapshotChanges，我可以轻松获取电台列表以及相关的元数据。然后我得到“stationName”并在另一个查询中使用它来获取与该站关联的项目。然后在嵌套的 ngFor 循环中，我显示了电台以及理想情况下相关的项目，但是它们没有显示出来，我不知道为什么。在控制台中，我可以看到在循环获取它们时关联的项目。我想我遗漏了一些明显的东西，任何帮助都会很棒。

想要的效果：

station 1
 - project 1, project 3, project 5

station 2
 - project 2, project 6

station 3
 - project 4, project 7, project 8

etc.

firestore 查询：

    this.shopsCollection = afs.collection('stations', ref => ref.orderBy('StationtName'));
    this.shops = this.shopsCollection.snapshotChanges().pipe(
      map(actions => actions.map(a => {
        const data = a.payload.doc.data() as Shop;
        const id = a.payload.doc.id;

        this.queues = this.afs.collection('projects', ref => ref.where('station', '==', data.StationtName)).valueChanges().subscribe(data=>{
          console.log(data);
         })
console.log(data.StationtName);
        return { id, ...data };
      }))

    );

html:

<ul>
    <li *ngFor="let shop of shops | async">
       <ion-button>{{shop.StationtName}}</ion-button>

            <div *ngFor="let queue of queues | async">
                 {{queue.SKU}}
            </div>  

    </li>
</ul> 

此特定设置会导致以下错误：

Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'

非常感谢任何帮助。谢谢

Answer 1

尝试删除 |队列 observable 上的异步管道，因为您已经在组件中订阅，您不需要在模板中做。

HTH