离子柱如何在ngFor中重新排列序列

时间:2019-01-23 12:25:13

标签: ionic3 angular5 angular6 angular7

我有一个数组,其中有多个项目,它们在其中循环。但是要在数组中将某些项向左侧渲染,而将某些项在右侧渲染。项目顺序不成比例。

所以我尝试过的是这个

<ion-row class="practical-info">
    <ng-container *ngFor="let veld of rubriek?.velden">

        <ion-col *ngIf="practicalInfoLeftcolumn(veld)" 
            [ngClass]="(veld?.titel) ? 'xs-padding' : null" col-6 pull-6>

            <osi-detail-text-row [label]="veld.titel">
                <span [innerHtml]="veld.waarde | safeHtml"></span>
            </osi-detail-text-row>
        </ion-col>

        <ion-col *ngIf="!practicalInfoLeftcolumn(veld)" 
                [ngClass]="(veld?.titel) ? 'xs-padding' : null" 
                [attr.col-6]="(veld?.titel) ? true : null" 
                [attr.col-12]="(!veld?.titel) ? true : null" push-6>

            <osi-detail-text-row [label]="veld.titel">
                <span [innerHtml]="veld.waarde | safeHtml"></span>
            </osi-detail-text-row>
        </ion-col>                              
    </ng-container>
</ion-row>

方法如下:

practicalInfoLeftcolumn(data){

  switch(data.veld) {
    case 'item-code':
    case 'item-cursustype':
    case 'item-punten':
    case 'item-categorie':
    case 'item-voertaal':
      return true;

    default: 
      return false;
  }
}

必须在左侧为true,在右侧为false,但这仍使列true |彼此相邻。

有人可以帮我吗,还是更改api中项目的顺序更好?

0 个答案:

没有答案