Question

正在运行的ionic 3应用程序需要在每次单击列时扩展行。

这是我的目标：

1）屏幕上有两个对话框

2）屏幕上每一列的展开行。

我在https://www.joshmorony.com/creating-an-accordion-list-in-ionic/之后做了什么，但是它将在列内展开列。我需要选择列的行。

Answer 1

我找到了执行此操作的最佳方法及其对我的工作。

var testData = '{   name=xyz, \
ip=[127.0.0.1], \
machine_id=AVC_ASD_QWESF, \
sys_Properties=[{ \
            Memory=4 GB, \
            system_type={ \
                    OS=64 bit, \
                    processor=64 bit \
                    } \
            }] \}';

var testJson = testData.replace(/(\s)([^\s]*)(\=)/g,'"$2"$3').replace(/(\=)/g, ":").replace(/\s+/g," ").replace(/(\:)([^\:\,\}]*)(\,|\})/g,'$1"$2"$3').replace(/(\")(\[)(.*)(\])(\")/g,"$2$1$3$5$4");

console.log(JSON.parse(testJson))

在您的.ts文件中

<ion-grid class="card-background-page" no-padding>
    <ion-row *ngFor="let i of rows" no-padding>
        <ion-col *ngFor="let category of categories | slice:(i*2):(i+1)*2" col-6 col-md-4 col-xl-3 (click)="expandItem(category, i)">
            <ion-card>
                <img src="{{category?.url}}" />
                <div [ngClass]="(listItemExpandedData?.id === category?.id) ? '' : 'textMiddle'">
                    <div class="card-title" [hidden]="listItemExpandedData?.id === category?.id">{{category?.title | slice:0:20}}</div>
                </div>
            </ion-card>
        </ion-col>
        <ion-col col-12 *ngIf="listItemExpanded === i" class="ItemExpandedData" [class.collapsed]="!listItemExpanded"> {{listItemExpandedData?.title}}</ion-col>
    </ion-row> </ion-grid>

API响应

categories = [];
rows: any;
listItemExpanded = false;
listItemExpandedData: any;

切换功能

this.categories = data.posts;
this.rows = Array.from(Array(Math.ceil(this.categories.length / 2)).keys());

Css

expandItem(item, i){
    if(!this.listItemExpandedData) {
        this.listItemExpanded = i;
        this.listItemExpandedData = item;
    } else {
      if(item.id === this.listItemExpandedData.id  ){
        this.listItemExpanded = false;
        this.listItemExpandedData = [];
      } else {
        this.listItemExpanded = i;
        this.listItemExpandedData = item;
      }
    }
}

See Result

Answer 2

理论上应该是相同的：

<ion-row (click)="selected =´row1´">
   <ion-col>Field 1 </ion-col>
   <ion-col>Field 2 </ion-col>
</ion-row>
<ion-row *ngIf="selected ==´row1´">
   <ion-col>Your Info text</ion-col>
</ion-row>

如果要平滑过渡，请将动画添加到下一行，或者将ngClass的高度从0更改为xx，然后使用ngClass代替ngIf，然后添加css过渡。

ionic 3展开行在列上单击

2 个答案: