ionic 2 angular 2 在两列中分布绑定记录

Posted 2023-02-22

【中文标题】ionic 2 angular 2 在两列中分布绑定记录

【英文标题】：ionic 2 angular 2 distribute binding records in two columns

【发布时间】：2018-03-15 07:31:04

【问题描述】：

我正在为一个简单的操作而苦苦挣扎，我需要将一些从 firebase2 listobservable 绑定的徽标分布在两列中。我有一个参考号，调用顺序，它是一个序列号，所以我可以知道哪个是奇数，哪一对，但我怎样才能在同一行留下一对奇数和一对。这是我的“绑定代码”的想法：

<ion-grid>
<ion-row *ngFor="let hotel of hotels | async">
  <ion-col col-6 *ngIf="hotel.orden%2 == 1" (click)="itemTapped(hotel.$key)">
    <img src="hotel.logo" >
  </ion-col>
  <ion-col col-6 *ngIf="hotel.orden%2 == 0" (click)="itemTapped(hotel.$key)">
     <img src="hotel.logo" >
  </ion-col>
</ion-row>

在“酒店”集合中，我有两个元素：订单和徽标（徽标是图像路径）。

谁能给我一个提示，我来这里是为了一些我们的。 提前致谢！

这是目标：

【参考方案1】：

您可以使用 ng-container 每 2 步对元素进行分组，如下所示：

[编辑]：确保酒店的类型为 any[]

<ion-grid *ngIf="hotels">
  <ion-row *ngFor="let hotel of hotels | async;let i = index">
    <ng-container *ngIf="hotel.orden%2 == 0">
      <ion-col col-6 >
        <img src="hotel.logo" (click)="itemTapped(hotel.$key)">
      </ion-col>
      <ion-col col-6>
        <img *ngIf="hotels.length - 1 > i && hotels[i+1].orden % 2 === 1"
              (click)="itemTapped(hotels[i+1].$key)"
              src="hotels[i+1].logo">
      </ion-col>
    </ng-container>
  </ion-row>
</ion-grid>

这里假设第一个元素总是偶数。如果不是，那么第一个元素将被解雇。但我相信你可以从这一点上解决问题！

【讨论】：

嗨 Mehdi，感谢您的 cmets，这是个好主意，但我在使用 hotels[i+1].logo 时遇到了问题，我收到了以下错误消息： “ERROR TypeError: co.hotels[v.context.index] is undefined”，你认为是语法错误吗？

我不知道您的 ts 代码是什么样的，但我可以做出的一个猜测是，该错误是由于酒店是可观察的这一事实引起的。我测试了这段代码，区别在于酒店是我在订阅函数中返回响应后构建的酒店数组。试试看！

嗨 Mehdi，是的，酒店是一个 Firebase 列表 Observable -> this.hotels = db.list('hoteles/', query: orderByChild: 'orden', );当你推荐我时，我尝试订阅 -> this.hotels = db.list('/hoteles/', preserveSnapshot: true ); this.hotels.subscribe(snapshot => snapshot.forEach(snapshot => console.log(snapshot.key, snapshot.val()); ); );但我仍然有同样的错误信息； TypeError: co.hotels[v.context.index] 未定义

在你的例子中，hotels 仍然是一个 Observable。尝试在返回时将实际数组存储在酒店中。因此，请确保您在酒店存在之前不要尝试消费。我已经编辑了我的回复以反映这一点