在异步中迭代2个混合数组

时间:2017-11-29 05:18:55

标签: angular ionic2

请检查代码:

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">

如果我需要添加管道怎么做?

1 个答案:

答案 0 :(得分:0)

选项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>

只要您必须从第二个Observable填充umat_last

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