Question

我有一个问题，我为每个按钮项目重复所有图像。我需要为每个项目显示单个图像而不是所有项目。谢谢。任何帮助将不胜感激。

<ion-item *ngFor="let c of weapons?.weapon_category?.weapons | search : terms">

  <button ion-item (click)="presentPopover($event,c)">
       <img *ngFor="let v of weapons?.url_category?.url_weapon" src="/assets/weapon/{{v.name}}"/>
       <h2>{{c.name}}</h2>
  </button>
</ion-item>

后我已经应用了这些变化。但是，由于某种原因，图像不再显示。

<ion-item *ngFor="let c of weapons?.weapon_category?.weapons | search : terms">
  <button  ion-item (click)="presentPopover($event,c)">
       <img src="/assets/weapon/{{c.url_category?.url_weapon?.name}}"/>
       <h2>{{c.name}}</h2>
  </button>
</ion-item>

Json对象

{
  "categories": {

    "weapon_category": {

      "weapons": [
        {
          "name": "AKM",
        }
      ]},
     "url_category": {

      "url_weapon": [{
            "type": "file",
            "name": "Icon_weapon_AKM.png"
        }
       ]}
}

Answer 1

这看起来是一个命名问题：您使用weapons两次，但似乎您希望在循环中使用c进行查找。

试试这个：

<ion-item *ngFor="let c of weapons?.weapon_category?.weapons | search : terms">
  <button ion-item (click)="presentPopover($event,c)">
       <img src="/assets/weapon/{{c.url_category.url_weapon}}"/>
       <h2>{{c.name}}</h2>
  </button>
</ion-item>

在ngfor中重复图像

1 个答案: