迭代2异步中的混合阵列

Question

请检查代码：

export class SomePage {
  uids:Observable<any[]>;
  uamt:Observable<any[]>;
  constructor(private db: AngularFireDatabase) {
          this.uids = this.db.list('data/request').snapshotChanges().map(changes => {
                return changes.map(c => ({ key: c.payload.key, ...c.payload.val() }));
                });
          }
          this.uamt = this.db.list('data/account').snapshotChanges().map(changes => {
                    return changes.map(c => ({ key: c.payload.key, ...c.payload.val() }));
                });
          }

无需管道吗？

//some.html
<ion-row *ngFor="let ud of uids | async; let bl of uamt | async">

如果我需要添加管道如何做？

Answer 1

NGFOR中的半隆之后的第二部分是为了获得现有循环的索引，而不是为了制作另一个循环。诸如"让UID的UD | async; Let i = index"之类的东西，然后如果需要的话，您将拥有可在组件中使用的循环索引号。

，但这不是你想要的。我不知道什么是" uids"one_answers" uamt"，但听起来您想要两个列表中每个项目的一行。也许您可以做：

<ion-row *ngFor="let ud of uids | async"> <ion-row *ngFor="let bl of uamt | async">

或在组件中您可以将它们合并到相同的可观察到，也许是这样的东西：

class SomePage {
  uidsAndUamt: Observable<any[]>;
  constructor(private someService: SomeService) {}
  ngOnInit() {
    this.uidsAndUamt = this.someService.uids.mergeMap(uids => {
      return this.someService.uamt.map(uamt => uids.concat(uamt));
    })
  }
}

然后您只会在html中使用它：

<ion-row *ngFor="let item of uidsAndUamt | async">

我不确定您是否正在寻找。

Answer 2

选项1

您可以使用ng-container创建嵌套绑定，只选择两个数组在相同索引上的绑定。

<ng-container *ngFor="let um of umat | async; let i = index">
  <ng-container *ngFor="let ui of uids | asnyc; let j = index">
    <ion-row *ngIf="i==j">
    </ion-row>
  </ng-container>
</ng-container>

此选项的问题是，如果您在这些数组中有许多（100多个）项目，则Angular必须迭代100*100次。因此不适合大型阵列。

选项2

您可以通过这样的两个阵列迭代。只要您知道它们在同一

中都有两个值

<ion-row *ngFor="let uid of uids | async; let i=index" >
     uid = {{uid}}
    uamt = {{uamt_last[i]}}
</ion-row>

只要您必须从第二个可观察到的umat_last填充umat_last

umat.subscribe((data)=>{this.umat_last = dat;});