在Angular 2中以NgFor内部的NgIf显示特殊网格布局中的元素

Question

我需要在特殊网格layout中显示商品详情。前三项具有最高状态（类型= 1）。下一个元素具有较低的状态（类型= 2和类型= 3），并且必须按照图像中的顺序加载。但我的结果显示不正确，一行中的每个元素都像this。我写的模板代码：

<div id="products" class="list-group row" *ngFor="#listing of listings">
  <div class="row">
    <div class="item col-xs-12 col-sm-12 col-md-12 col-lg-12" *ngIf="listing.type==1" (click)="gotoDetail(listing)">
      <div class="thumbnail">
        <img class="group list-group-image" src="{{listing.imageUrl}}" alt="" />
      </div>
    </div>
  </div>
  <div class="row">
    <div class="item col-xs-6 col-sm-6 col-md-6 col-lg-6" *ngIf="listing.type==2" (click)="gotoDetail(listing)">
      <div class="thumbnail">
        <img class="group list-group-image" src="{{listing.imageUrl}}" alt="" />
      </div>
    </div>
    <div class="item col-xs-3 col-sm-3 col-md-3 col-lg-3" *ngIf="listing.type==3" (click)="gotoDetail(listing)">
      <div class="thumbnail">
        <img class="group list-group-image" src="{{listing.imageUrl}}" alt="" />
      </div>
    </div>
  </div>
  <div class="row">
    <div class="item col-xs-3 col-sm-3 col-md-3 col-lg-3" *ngIf="listing.type==3" (click)="gotoDetail(listing)">
      <div class="thumbnail">
        <img class="group list-group-image" src="{{listing.imageUrl}}" alt="" />
      </div>
    </div>
    <div class="item col-xs-6 col-sm-6 col-md-6 col-lg-6" *ngIf="listing.type==2" (click)="gotoDetail(listing)">
      <div class="thumbnail">
        <img class="group list-group-image" src="{{listing.imageUrl}}" alt="" />
      </div>
    </div>
  </div>
  <div class="row">
    <div class="item col-xs-3 col-sm-3 col-md-3 col-lg-3" *ngIf="listing.type==3" (click)="gotoDetail(listing)">
      <div class="thumbnail">
        <img class="group list-group-image" src="{{listing.imageUrl}}" alt="" />
      </div>
    </div>
  </div>
</div>
<div class="moreContent">
  <center><a href="#">LOAD MORE</a></center>
</div>