离子：连续打印每张照片

Question

我是 ionic 的新手，我想连续打印图库中的每张照片

<ion-grid>
    <ion-row>
    <ion-col col-6 *ngFor="let photo of photoService.photos">
        <img [src]="photo.data" />
        </ion-col>
    </ion-row>
</ion-grid>`

这会并排打印所有照片，但我想要的是让每张照片排成一排

更正式地说，我想要这个：

  `Foreach photo in photos 
      print the photo in an ion-row`

怎么做？

Answer 1

我这样做了并且有效

 <ion-grid>
    <ion-row *ngFor="let photo of photoService.photos">
        <ion-col>
           <img [src]="photo.data" />
        </ion-col>
    </ion-row>
 </ion-grid>

Answer 2

在 ionic 4 中，许多事情都发生了变化。只需将 size="6" 替换为 col-6。有了这个，您将在每行中获得 2 张照片，但您在每行中显示一张照片之后尝试第二个示例。 ex-1:

  <ion-grid>
    <ion-row>
      <ion-col size="6" *ngFor="let photo of photoService.photos">
        <img [src]="photo.data" />
      </ion-col>
    </ion-row>
  </ion-grid>

ex-2:

  <ion-grid>
    <ion-row *ngFor="let photo of photoService.photos">
      <ion-col>
        <img [src]="photo.data" />
      </ion-col>
    </ion-row>
  </ion-grid>

另外，你可以使用ionic card view，这样会更好看：

  <ion-grid>
    <ion-row *ngFor="let photo of photoService.photos">
      <ion-card>
        <img [src]="photo.data" />
      </ion-card>
    </ion-row>
  </ion-grid>

离子：连续打印每张照片

ionic: print each photo in a row

ionic-framework

angular

ionic4