通过数组

时间:2017-11-23 09:18:44

标签: javascript angular typescript ionic-framework ionic3

我在使用ngFor时遇到了一些问题,如果有人能提供一些非常有帮助的建议,我就无法从其他问题中找到解决方案。

我目前的代码是:

 <ion-list *ngIf="items.length">
 <ion-item-sliding style="background-color: #ff2d85" #item>
 <ion-item *ngFor="let item of items; let i = index">
 <ion-avatar item-start><img src="../../assets/imgs/{{item.prodAvatar}}">
 </ion-avatar>
 <h2 id=prod{{i}}Title>{{item.prodTitle}}</h2>
 <h3 id=prod{{i}}Desc>{{item.prodDesc}}</h3>
 <p id=prod{{i}}Little>{{item.prodLittle}}</p>
 <button id="bt{{i}}" ion-button outline item-end class="listbutton" 
 (click)="cart([i])"><ion-icon name="basket"></ion-icon></button>
 </ion-item>
 <ion-item-options side="right">
 <button ion-button expandable></button>
 </ion-item-options>
 </ion-item-sliding>
 <ion-item>
  <button ion-button>NEW PAGE</button>
  <button ion-button secondary menuToggle>MENU</button>
  <button (click)="openVibrate()" ion-button>VIBRATE</button>
  <button (click)="openCamera()" ion-button>CAMERA</button>
 </ion-item>
 </ion-list>

这显示我的数据很好,除了列表中的滑块仅在此列表中的第一个对象上滑动的问题,这很明显,因为滑动元素在for循环之外。但是,当我将ngFor放在<ion-item-sliding>中时,使用{{i}}的所有数据仍然存在,但使用{{item.anything}}的数据现在为空。

解决方案可能会在当天清楚,但我看不出它是什么

任何人都可以提供任何见解吗?

1 个答案:

答案 0 :(得分:1)

您需要在ngFor代码中使用ion-item-sliding

<ion-item-sliding *ngFor="let item of items; let i = index" style="background-color: #ff2d85" #item1>