Angular 和 Ionic 2：使用 NgFor 和条件显示每行显示 2 列答案

【问题标题】：Angular and Ionic 2 : Showing 2 columns per row with NgFor and a conditional displayAngular 和 Ionic 2：使用 NgFor 和条件显示每行显示 2 列
【发布时间】：2017-06-11 16:11:28
【问题描述】：

我要做的是在 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 :/)

【问题讨论】：

那么我想你必须阅读我的整个问题，因为在标题的某些部分提到它，有一个 If 持有问题的一部分:)
是的 :) 也许我不明白，但你不希望这些项目总是在两列的行中吗？如果您在 ion-col 上有 *ngFor，您将有一行，但有 n 列。但是因为一旦“宽度计数”列超过 12，它就会换行。您现在拥有它的方式可以防止 ion-cols 垂直移动。
您找到解决方案了吗？

标签： angular ionic-framework ionic2

【解决方案1】：

您可以将*ngFor 从<ion-row> 移动到<ion-col>。您现在拥有它的方式可以防止<ion-col>s 永远垂直移动，因为它们将保持在它们的行中。如果您移动*ngFor，您将只有一个<ion-row> 和n <ion-col>s。当您的列宽为 6 (col-6) 时，无论如何您在一行上只会有两列，因为当列宽超过 12 时，它将中断为新行。当您的其中一项因*ngIf 而被删除时，布局将自行调整。

移动*ngFor-statement 的一个问题是你必须移动*ngIf，因为你不能在一个宿主元素上有多个结构指令（*ngIf，*ngFor）（ structural directive docs)。

【讨论】：

这就是问题所在。 ng if 触发时不会删除 col，而只会删除卡片，因此会留下一个空白区域，而不是将其位置留给下一个 col
太棒了！那么你就知道你需要做什么了！ :)
不，这是问题的目的：D
以法郎回馈你，:) 这并不明显。您可以使用pipe 来过滤数组。
那么您的问题到底是什么？管道如何实现？

【解决方案2】：

将 *ngFor 移动到您的列中，并操作实际的数组，而不是仅仅在其上抛出 *ngIf 以防止某些“数据”显示。

我也不认为像你正在做的那样将过滤器绑定到 ngIf 是有效的。

【讨论】：