我想在离子卡中显示彼此相邻的图像

Question

我目前有一张离子卡，其中带有来自JSON对象的图片。我想把图片放在一起。在屏幕截图中，您可以看到我想要的内容。 这就是我想要的： https://gyazo.com/ae64a28f3b6f471a063eb43fed7fb535

这是我有： https://gyazo.com/942431243bf9db75b5bf8d945bb36ce2

有3张照片，但你不能看到它。

<ion-header> 
    <ion-navbar color ="primary"> 
    <button ion-button menuToggle> 
     <ion-icon name="menu"></ion-icon> 
    </button> 
    <ion-title>Amcik</ion-title> 
    </ion-navbar> 
</ion-header> 

<ion-content> 
    <ion-searchbar> 
</ion-searchbar> 
    <ion-grid> 
    <ion-row> 
     <ion-col col-12 col-md *ngFor="let item of items"> 
     <ion-card> 
      <ion-item> 
      <h2>{{ item.name }}</h2> 
      <p>{{ item.count }} leerlingen</p> 
      </ion-item> 
      <ion-item *ngFor="let i of item.items"> 
      <ion-avatar> 
      <img src="{{i.avatar}}"> 
      </ion-avatar> 
     </ion-item> 
     </ion-card> 
     </ion-col> 
    </ion-row> 
</ion-grid> 
</ion-content> 

Answer 1

这里的<ion-item> CSS和<ion-avatar>也将有一个影响。所以，我认为你应该使用你自己的<div> s。就像这样：

取而代之的是：

<ion-item *ngFor="let i of item.items"> 
    <ion-avatar> 
     <img src="{{i.avatar}}"> 
    </ion-avatar> 
</ion-item> 

使用此：

<div style="display: inline-block;" *ngFor="let i of item.items"> 
    <img src={{i.avatar}}> 
</div> 

解决方案是使用/试用CSS属性display的值。像display: inline-block一样。