角度和离子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为假(因为行),也会使块保持其位置(50%)仍然存在于DOM上,我们删除了col:/)

Answer 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 ).