Question

现在我正在使用包含一些图像的Ionic实现一个简单的视图，代码如下所示：

<ion-content padding>
<ion-slides pager>

<ion-slide style="background-color: white">
  <h2>Slide 1</h2>
  <img src="../../assets/img/animals/dog.jpg">
</ion-slide>

<ion-slide style="background-color: white">
  <h2>Slide 2</h2>
  <img src="../../assets/img/animals/horse.jpg">
</ion-slide>

<ion-slide style="background-color: white">
  <h2>Slide 3</h2>
  <img src="../../assets/img/animals/cat.jpg">
</ion-slide>

我对离子和角度很新，所以我想知道循环遍历整个/ img / animals文件夹的最佳方法是什么，扫描.jpg文件并创建<ion-slide> for每个文件。由于还有很多资产尚未到来，我认为每次为每个资产添加自定义代码都不切实际。

Answer 1

您可以让模板遍历数组：

<ion-slide *ngFor="let slide of slides" style="background-color: white">
  <h2>{{ slide.title }}</h2>
  <img [src]="slide.url">
</ion-slide>

在您的组件中，定义此变量“幻灯片”：

class YouComponent {
  slides = [];
  someMethod() { }
}

在组件内的某个位置，您可以定义它：

someMethod() {
  this.slides = [
    { title: 'Title 1', url: 'url1.jpg' },
    { title: 'Title 2', url: 'url2.jpg' },
    { title: 'Title 3', url: 'url3.jpg' }
  ]
}

这个用于设置this.slides值的数组可以在组件.ts文件中进行硬编码，可以从配置文件中读取，可以从API端点中检索等等...但是事情是你将模板与数据分离。

离子滑块 - 读取图像文件夹的内容

1 个答案: