Angular 和 ionic 2 : Showing 2 columns per row with NgFor and a conditional display

Question

我想做的是在 ionic 2 应用程序中每行显示 2 列，当用户在搜索框中输入一些文本时，例如键入仅存在于第二行的文本，第一行一个消失了(现在确实发生了，但是第二列保留在右边，而不是把它放在隐藏的位置)。

这是我现在使用的代码，它没有让我的列在同一行中:

<ion-grid>
    <div [ngSwitch]="top">
      <div *ngSwitchCase="'resto'">
        <ion-row responsive-sm wrap *ngFor="let data of topRestaurants | ArrayObject ">
          <ion-col col-6 *ngIf="data.value['title'].toLowerCase().includes(textFilter)">
            <ion-card>
                <ion-col col-12 no-margin no-padding><img src="{{data.value['logo']}}"/></ion-col>
                <ion-col col-12 no-margin no-padding>
                  <ion-card-content>
                    <ion-card-title>
                      {{data.value['title']}} <ion-badge item-end>{{(data.value['distance']) | number:'1.2-2'}} km</ion-badge>
                    </ion-card-title>
                    <p>
                      <small><rating [score]="data.value['overall_rating']" [max]="5"></rating> ({{data.value['reviews_count']}}) Avis</small>
                    </p>
                  </ion-card-content>
                </ion-col>
            </ion-card>
          </ion-col>
        </ion-row>
      </div>

当我制作如下所示的 ion-col 样式时:display: inline-block, width:50%，它几乎可以正常工作，但即使 ngIf 为 false (因为该行仍然存在于 DOM 中，所以我们删除了 col :/)

Answer 1

您可以移动 *ngFor来自 <ion-row>到 <ion-col> .你现在拥有它的方式可以防止 <ion-col>永远不会垂直移动，因为它们会保持在自己的行中。如果你移动 *ngFor你将只有一个<ion-row>与 n <ion-col>秒。当列宽为 6 ( col-6 ) 时，一行中只会有两列，因为当列宽超过 12 时，它将换行。当你的一件元素因为 *ngIf 而被移除时布局会自行调整。

移动 *ngFor 会出现一个问题-声明是你必须移动*ngIf ，因为在一个宿主元素 ( structural directive docs ) 上不能有多个结构指令 (*ngIf, *ngFor)。