角度とイオン2：NgForと条件付き表示で1列に2列表示

Question

私がしようとしているのは、イオン2アプリで行ごとに2列を表示し、ユーザーが検索ボックスにテキストを入力したときですたとえば、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> 

私が作るときは、次のようなイオン-COLスタイル：表示：インラインブロック、幅：50 ％、それはほとんどうまく動作しますが、ngIfがfalseであってもブロックが自分の場所（50％）を保持するようにします（DOMに行が残っているので、代わりにcolを削除します）/：

Answer 1

*ngForを<ion-row>から<ion-col>に移動することができます。あなたが今持っている方法は、<ion-col>が行に留まるので垂直方向に動かないようにします。 *ngForを移動した場合は、は、のうち1つのみを<ion-col>とします。列の幅が6（col-6）の場合、列の幅が12を超えると新しい行に折れるので、行には2つの列しかありません。 *ngIfのためにアイテムの1つが削除されると、レイアウトが自動的に調整されます。 *ngFor -statementを動かす出てくる

一つの問題は、あなたがホスト要素（structural directive docs）上の複数の構造・ディレクティブ（* ngIf、* ngFor）を持つことができないので、*ngIfを移動する必要がありますということです。

Answer 2

* ngForを列に移動して、アクチュエーターを操作しますlの配列ではなく、特定の 'データ'が表示されないように* ngIfを投げるだけです。

私はまた、あなたのようにngIfにフィルタをバインドすることは効率的ではないと思います。