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

尝试删除|队列上的异步管道是可观察到的，因为您已经在组件中进行预订，因此无需在模板中进行操作。

HTH

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

1 个答案: