角度和离子2：每行显示2列NgFor和条件显示

Question

我尝试做的是在离子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，也会使块保持其位置（50％）（因为该行仍然存在于DOM上，我们删除了col：/）

Answer 1

您可以将*ngFor从<ion-row>移至<ion-col>。你现在拥有它的方式可以防止<ion-col>垂直移动，因为它们将保留在它们的行中。如果您移动*ngFor，则只有<ion-row>个<ion-col>个col-6。如果列宽为6（*ngIf），则无论如何都会在一行中有两列，因为当列宽超过12时，它将断开到新行。当您的某个商品由于*ngFor而被删除时，布局会自行调整。

移动*ngIf语句会产生一个问题，就是你必须移动#include<stdio.h> int main() { int a = 0; while(1){ scanf("%d",&a); if(a==42) break; printf("%d\n",a); } return 0; } ，因为你不能有多个结构指令（* ngIf，* ngFor）主机元素（structural directive docs）。

Answer 2

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

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