javascript - 通过数组在 Ionic/Angular ngFor 中遇到问题

标签 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>

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

解决方案可能一目了然,但我看不出它是什么

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

最佳答案

您需要在ion-item-sliding 标签中使用ngFor

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

关于javascript - 通过数组在 Ionic/Angular ngFor 中遇到问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47451665/

相关文章:

css - matTooltipClass 不应用 css

angular - 下载文件时如何传递身份验证 token ?

Angular 6 "Can' t 绑定(bind)到 'ngModel',因为它不是 'input' 的已知属性。”

javascript - 获取 url 的 Angular 变化

javascript - findOne 可以匹配第一个还是最后一个?

javascript - Change 事件在 IE 中点击前触发

javascript - CORS - 跨源不起作用

javascript - 元素的屏幕坐标,通过 Javascript

javascript - Angular 8 this.router.navigate() 更改 URL 但不呈现到下一页

javascript - 不覆盖现有属性的Object.Assign()