Ionic-2：离子项之间的空间问题

Question

我正在使用'ngFor'来重复离子项目，但我没有获得每个项目的任何空间。

我的代码：

<ion-list >
    <button ion-item class="my-item" *ngFor="let r of recentUpdatesData" (click)="goToReleatedPage(r)">
        <ion-thumbnail item-left>
            <img src="assets/{{r.imagePath}}" alt="your image">
        </ion-thumbnail>
        <h2><strong>{{r.title}}</strong></h2>
        <h3>{{r.type}}</h3>
        <p>{{r.description | slice : 0:500}}</p>
    </button>
    <hr class="style14" />
</ion-list>

我需要的最终结果：

Answer 1

我建议你只使用ion-item代替button。它似乎是在列表项中添加额外的填充。

<ion-list >
    <ion-item class="my-item" *ngFor="let r of recentUpdatesData" (tap)="goToReleatedPage(r)">
        <ion-thumbnail item-left>
            <img src="assets/{{r.imagePath}}" alt="your image">
        </ion-thumbnail>
        <h2><strong>{{r.title}}</strong></h2>
        <h3>{{r.type}}</h3>
        <p>{{r.description | slice : 0:500}}</p>
    </ion-item>
    <hr class="style14" />
</ion-list>

附注：在移动设备中使用tap代替click。

或者您应该使用ion-grid而不是ion-list重新设计。

 <ion-grid>
        <ion-row class="my-item" *ngFor="let r of recentUpdatesData" (tap)="goToReleatedPage(r)">
          <ion-col col-6>
            <ion-thumbnail item-left>
                <img src="assets/{{r.imagePath}}" alt="your image">
            </ion-thumbnail>
            </ion-col>
            <ion-col>
             <ion-row>
            <h2><strong>{{r.title}}</strong></h2>
             </ion-row>
            <ion-row>
            <h3>{{r.type}}</h3>
             </ion-row>
             <ion-row>
            <p>{{r.description | slice : 0:500}}</p>
</ion-row>
</ion-col>

        </ion-row>
        <hr class="style14" />
    </ion-grid>